兼容的网页宽度margin padding

简介:

hack兼容:

-moz-  /* Firefox 4 */
-webkit- /* Safari 和 Chrome */
-o-  /* Opera */

IE6承认*和_和+,不承认!important
IE7识别*和+,不识别_,识别!imortant
而firfox两个都不识别,识别!important 
<!--[if lt IE 9]>  
   <script src="http://html5shim.googlecode.com.svn/trunk/html5.js"></script>  
<![endif]-->

selector{
background-color:#f00;/*all*/
background-color:#0ff\0;/* ie 8/9 */
background-color:#0f0\9\0;/* ie9 */ 这个经过常识ie8也一样有效,不好使
*background-color:#00f;/*ie6 7*/
_background-color:#ff0;/*ie6*/
background-color//:#090;/*非IE*/
background-color:#900\9;/*全部ie*/
}
当然。还有专门针对IE7的写法:+background-color:#00f;
之前对css hack做过一个简单的汇总《CSS hack 汇总》,如今进行一些更新:

    “\9“  仅仅在IE6/IE7/IE8/IE9/IE10下生效
    “\0”  仅仅在 IE8/IE9/IE10下生效
    “\9\0”仅仅在IE9/IE10下生效

故眼下假设须要仅仅针对ie8的hack,可先使用在IE8/IE9/IE10生效的“\0”,再用仅在IE9/IE10生效的“\9\0”hack覆盖之前的样式。




selector{
color:#000;
color:#F00\0;   /* only for IE8&IE9&IE10 */
color:#000\9\0; /* only for IE9&IE10 */
}

框架用990,非框架用1000

1、设了float:left的元素同意它的右边存在不论什么元素同行显示。不论是内联元素还是块元素。但它的左边还是不同意存在不论什么元素与之同行显示,哪怕其他的元素的代码在前,除非也给前面的元素加上float:left后,才同意同行显示。
设了display:inline的元素,同意它的前后存在其他的内联元素同行显示。关于代码在其前面的块元素之同行显示,则要让前面的元素浮动(无论是左还是右浮动)或设为display:inline。还有代码在后面的是块元素(管它有没有浮动,是左浮动还是右浮动),均不能与之同行,除非设为display:inline。
另外,给块级元素设上display:inline是解决有名的IE6中双倍浮动的利器。
2、float 能使块级元素变成行间元素! 
3、.行间元素仅仅有左右外边距。无上下外边距,且左右外边距不会合并!仅仅有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。


4、IE6对BOX理解的差异导致设为float的div在ie下margin的值会加倍(块级元素margin都会加倍,且float方向和margin同方向时)。如:
 #box{ float:left; width:100px; margin:0 0 0 50px; }

 //这样的情况之下IE会产生100px的距离
 解决方法例如以下:
 #box{ float:left; width:100px; margin:0 0 0 50px; display:inline;}
 //仅仅需给其加display:inline属性使使浮动忽略。就可以解决
5、
float元素的宽度之和要小于100% 
6. float元素务必指定width属性 
  非常多浏览器在显示未指定width的float元素时会有bug。所以无论float元素的内容怎样。一定要为其指定width属性。 
  另外指定元素时尽量使用em而不是px做单位。


7. float元素不能指定margin和padding等属性 

  IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(能够在float元素内部嵌套一个div来设置margin和padding)。也能够使用hack方法为IE指定特别的值。

8、padding:添加padding值会增加整体尺寸

版权声明:本文博客原创文章。博客,未经同意,不得转载。







本文转自mfrbuaa博客园博客,原文链接:http://www.cnblogs.com/mfrbuaa/p/4678001.html,如需转载请自行联系原作者


相关文章
|
5月前
vw、px、vh 和 rem应用场景以及区别
【4月更文挑战第2天】 vw、px、vh 和 rem应用场景以及区别
726 10
|
2月前
|
前端开发
一张图搞懂盒子模型 margin padding
这篇文章通过一张图帮助读者理解CSS中的盒子模型,特别是`margin`和`padding`的概念,解决容易混淆这两个属性的问题。
|
5月前
|
前端开发
解决适配375像素宽度667像素高度移动端方法:推荐一款非常好用的px转rem单位的VSCode插件px to rem & rpx (cssrem)
解决适配375像素宽度667像素高度移动端方法:推荐一款非常好用的px转rem单位的VSCode插件px to rem & rpx (cssrem)
|
3月前
|
前端开发 容器
css【详解】—— margin属性(含margin百分比值,margin负值,margin合并,margin:auto,margin失效)
css【详解】—— margin属性(含margin百分比值,margin负值,margin合并,margin:auto,margin失效)
63 1
|
4月前
|
Web App开发 前端开发 JavaScript
技术经验分享:html视口单位:vw,vh,rem
技术经验分享:html视口单位:vw,vh,rem
20 0
|
前端开发 小程序
css:尺寸单位整理px、rem、em、vh、rpx
css:尺寸单位整理px、rem、em、vh、rpx
96 0
|
编解码 前端开发
css中rem em vh px各自代表的含义
css中rem em vh px各自代表的含义
151 0
css中rem em vh px各自代表的含义
|
前端开发
css:box-sizing告诉浏览器如何计算一个元素的总宽度和总高度
css:box-sizing告诉浏览器如何计算一个元素的总宽度和总高度
109 0
css:box-sizing告诉浏览器如何计算一个元素的总宽度和总高度
|
前端开发
web前端学习(二十)——CSS3外边距属性(margin)及填充属性(padding)的相关设置
web前端学习(二十)——CSS3外边距属性(margin)及填充属性(padding)的相关设置
web前端学习(二十)——CSS3外边距属性(margin)及填充属性(padding)的相关设置