您现在的位置是:网站首页> 编程资料编程资料
CSS中浏览器对尺寸和宽高解释差异的解决方法 _心得技巧_网页制作_
2023-11-09
366人已围观
简介 不同的浏览器对margin、padding、height、width 等属性的解释有很大的偏差。有时我们发现同样的两列布局,在不同的浏览器中两列长短不一,类似的情况太多了,如此困扰大家的麻烦,如何解决?
先看一个例子
无标题文档
在这里,height我分别定义了三个,
第一个正常定义,在所有浏览器中都会生效;
第二个定义在前边加了一个*号,这个在IE6,IE7中会正常识别为height属性,但是火狐和IE8会认为这是一个错误语法,被忽略,而根据先后执行的顺序,在IE6和IE7中带*号的height被执行,那么第一个正常height失效(或者说被覆盖);
第三个height在前边加了一个下划线,下划线只有IE6认为是有效的height属性,而IE7 IE8和火狐都视为”_height”属性是一个不存在的属性,所以不予执行,而IE6则将其执行。这样前两个height在IE6中时就被带下划线的height覆盖。
那么,通过这样一个例子,您应该了解,如果我们想在不通的浏览器中分别设置一个元素不通的高度的时候,就可以使用 * 和 _ 两个符号来协助定义。同时我们也了解了,微软是一个对错误容忍度多高的企业呀!.呵呵。
不过,如果把这个例子的前边两行文档类型和命名空间的声明取消掉的话 带下划线的height也会被正常显示。
width的设置是相同的。
我们在实际的工作中,更多的会遇到浏览器们对margin属性解释的不一样,那么这时星号和下划线就能够帮上大忙。
复制代码
代码如下:在这里,height我分别定义了三个,
第一个正常定义,在所有浏览器中都会生效;
第二个定义在前边加了一个*号,这个在IE6,IE7中会正常识别为height属性,但是火狐和IE8会认为这是一个错误语法,被忽略,而根据先后执行的顺序,在IE6和IE7中带*号的height被执行,那么第一个正常height失效(或者说被覆盖);
第三个height在前边加了一个下划线,下划线只有IE6认为是有效的height属性,而IE7 IE8和火狐都视为”_height”属性是一个不存在的属性,所以不予执行,而IE6则将其执行。这样前两个height在IE6中时就被带下划线的height覆盖。
那么,通过这样一个例子,您应该了解,如果我们想在不通的浏览器中分别设置一个元素不通的高度的时候,就可以使用 * 和 _ 两个符号来协助定义。同时我们也了解了,微软是一个对错误容忍度多高的企业呀!.呵呵。
不过,如果把这个例子的前边两行文档类型和命名空间的声明取消掉的话 带下划线的height也会被正常显示。
width的设置是相同的。
我们在实际的工作中,更多的会遇到浏览器们对margin属性解释的不一样,那么这时星号和下划线就能够帮上大忙。
相关内容
- 对于大流量网站的解决方案_心得技巧_网页制作_
- Web设计10个在线开发工具介绍_心得技巧_网页制作_
- 去掉点击链接时出现的虚线框的几个方法_心得技巧_网页制作_
- HTTP 状态代码整理介绍_心得技巧_网页制作_
- 提高网站可用性和转化率的25个工具 _心得技巧_网页制作_
- 雷霆战机更新0.01M刷箱子刷分4月24日最新可用无异常方法_手机游戏_游戏攻略_
- 全民打怪兽阿奇诺属性一览_手机游戏_游戏攻略_
- 全民飞机大战限期挑战送萌宠活动介绍 累计300玩分送魔灵菲_手机游戏_游戏攻略_
- 天天酷跑最新辅助卡boss破解版使用教程_手机游戏_游戏攻略_
- 天天酷跑世界PK如何获得完胜_手机游戏_游戏攻略_
