IE8Beta2在处理HTML元素水平居中碰到的一个有趣的现象-CSDN博客

本文链接：https://blog.csdn.net/ghj1976/article/details/3182800

我的前面那篇博客“怪事，ASP.Net Development Server让我白忙了一下午 ”描述的问题产生的原因其实是写错的。今天在次碰到上面提到的问题时，才查出这个问题的根本原因。下面是一段简单的代码重新这个有趣的bug。

我的IE8版本信息如下：

有下面一段简单的Html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>
  
  title>

   
   head>
<body style="text-align:center">
<table style="background-color:Blue;">
<tr><td>123213
    
    td>
     
     tr>

      
      table>
 
       body>  
        html>

就是居中显示一个简单的Table。使用IE访问这个Html，就会看到居中显示。
但是你用IE8通过 http://local.csdn.net:49193/1.htm 这样的方式来访问，则不会居中。
而通过 http://localhost:49193/1.htm 这样的地址来访问则会居中。

下面的截图使用了IE8的新特性，用缩略图在一个页面演示了这两种不同地址的访问效果，你可以看到一个居中，一个居左，如下图：

确保 Host 文件有下面两行，就可以实现上述2个地址访问同一个内容：

127.0.0.1 localhost
127.0.0.1 local.csdn.net

用 FF 访问上述地址（不论是 http://local.csdn.net:49193/1.htm 还是 http://localhost:49193/1.htm ）都居左显示。

用IE的之前版本（IE 5.5 ，IE6 ， IE 7）访问，（不论是 http://local.csdn.net:49193/1.htm 还是 http://localhost:49193/1.htm ）则都居中显示。

结论：

显然IE8 在处理 http://localhost:49193/1.htm 时，用了兼容以前IE的处理机制。在处理 http://local.csdn.net:49193/1.htm 时，则是采用了跟 Mozilla系列浏览器一致的处理机制。

当然要让这段Html不论任何浏览器都居中显示，可以用 margin:0 auto; 来定制居中。

修改后的Html 代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>
  
  title>

   
   head>
<body style="text-align:center">
<table style="background-color:Blue;margin:0 auto;">
<tr><td>123213
    
    td>
     
     tr>

      
      table>
 
       body>  
        html>