来源：自学PHP网 时间：2015-02-05 11:34 作者： 阅读:次
[导读] 不同的浏览器对margin、padding、height、width 等属性的解释有很大的偏差。有时我们发现同样的两列布局，在不同的浏览器中两列长短不一，类似的情况太多了，如此困扰大家的麻烦，如何...
|
不同的浏览器对margin、padding、height、width 等属性的解释有很大的偏差。有时我们发现同样的两列布局，在不同的浏览器中两列长短不一，类似的情况太多了，如此困扰大家的麻烦，如何解决？
复制代码 代码如下:<!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> <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /> <title>无标题文档</title> <style> #m{height:300px;width:300px;background:#ccc} #a{float:left;height:100px;width:100px;background:#f00;} #b{float:left;height:100px;*height:110px;_height:120px;width:100px;background:#0f0;} #c{clear:both;height:100px;width:100px;*width:100px;_width:120px;background:#00f;} </style> </head> <body> <div id=”m”> <div id=”a”></div> <div id=”b”></div> <div id=”c”></div> </div> </body> </html> 在这里，height我分别定义了三个， 第一个正常定义，在所有浏览器中都会生效; 第二个定义在前边加了一个*号，这个在IE6,IE7中会正常识别为height属性，但是火狐和IE8会认为这是一个错误语法，被忽略，而根据先后执行的顺序，在IE6和IE7中带*号的height被执行，那么第一个正常height失效（或者说被覆盖）； 第三个height在前边加了一个下划线，下划线只有IE6认为是有效的height属性，而IE7 IE8和火狐都视为”_height”属性是一个不存在的属性，所以不予执行，而IE6则将其执行。这样前两个height在IE6中时就被带下划线的height覆盖。 那么，通过这样一个例子，您应该了解，如果我们想在不通的浏览器中分别设置一个元素不通的高度的时候，就可以使用 * 和 _ 两个符号来协助定义。同时我们也了解了，微软是一个对错误容忍度多高的企业呀!.呵呵。 不过，如果把这个例子的前边两行文档类型和命名空间的声明取消掉的话 带下划线的height也会被正常显示。 width的设置是相同的。 我们在实际的工作中，更多的会遇到浏览器们对margin属性解释的不一样，那么这时星号和下划线就能够帮上大忙。 |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
