IE8Beta2在处理HTML元素水平居中碰到的一个有趣的现象
来源:互联网 发布:仿淘宝订单页面 编辑:程序博客网 时间:2024/04/29 18:58
我的前面那篇博客“怪事,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>123213td>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>123213td>tr>table>body>html>
这时候, 不论IE的那个版本,还是 Mozilla系列浏览器都水平居中显示了。
- IE8Beta2在处理HTML元素水平居中碰到的一个有趣的现象
- html中块级元素的水平垂直居中
- html元素水平居中、垂直居中、水平垂直居中于其父级元素的方法
- html元素水平居中、垂直居中、水平垂直居中于其父级元素的方法
- 一个有趣的现象
- 一个有趣的现象
- html元素水平居中
- HTML中,不固定宽高的元素在DIV中水平并且垂直居中
- html元素水平居中的几种方法
- html元素水平居中的几种方法
- 一个有趣的数学现象
- foreach的一个有趣现象
- 一个有趣的现象----innodb_io_capacity
- 一个有趣的现象----innodb_io_capacity
- 绝对定位的元素的水平居中的一个方法
- float 元素的水平居中
- 元素水平居中的实现
- 元素的水平居中总结
- 开始啦~
- Struts2Action的属性赋值方式
- CString和char*互相转换
- 图片上传之前检查大小、尺寸、格式并预览
- 8
- IE8Beta2在处理HTML元素水平居中碰到的一个有趣的现象
- 9
- 删除表中重复的记录
- 多项式加法 链表方法
- 11
- 12
- 13
- Python的字符串编码相关小结
- 14