手机
当前位置:查字典教程网 >网页设计 >心得技巧 >CSS中浏览器对尺寸和宽高解释差异的解决方法
CSS中浏览器对尺寸和宽高解释差异的解决方法
摘要:先看一个例子无标题文档#m{height:300px;width:300px;background:#ccc}#a{float:left;h...

先看一个例子

<!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属性解释的不一样,那么这时星号和下划线就能够帮上大忙。

【CSS中浏览器对尺寸和宽高解释差异的解决方法】相关文章:

创建吸引访问者的网站内容的14种方法

浏览器可以注册的事件小结

在IE6,IE7 中DIV容器固定高度的使用技巧

豆瓣网站关于网站内容小改动的方法

页面中防止缓存的解决方法

网页FOUC问题导致网页混乱的解决方法

Sublime Text—设置浏览器快捷键的方法推荐

CSS样式表高效使用技巧充分利用样式表的强大性

关于遇到的浏览器兼容问题及应对方法(推荐)

清除css、javascript及背景图在浏览器中缓存的简单方法

精品推荐
分类导航