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值会增加整体尺寸

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

兼容的网页宽度margin padding的更多相关文章

  1. 巧用margin/padding的百分比值实现高度自适应(多用于占位,避免闪烁)

    本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说, ...

  2. css007 margin padding border

    css007 margin padding border 1.理解盒模型(盒模型:就是把一些东西,包括html各种标签都包含在一个 看不见的盒子里) 1/在web浏览器中任何标签都是一个盒子,内容的周 ...

  3. css之margin && padding讲解

    margin && padding盒子模型: margin是模块与模块的空隙,padding是内容与边框的空隙 注: 1.margin:边缘.空白 2.padding:填充 margi ...

  4. <转载>使用css让大图片不超过网页宽度

    让大图片不超过网页宽度,让图片不撑破通过CSS样式设置的DIV宽度! 接下来,我们来介绍下网站在开发DIV+CSS的时候会遇到一个问题,在发布一个大图片的时候因为图片过宽会撑破自己设置的div宽度的问 ...

  5. 总结那些有默认margin,padding值的html标签

    一.h1~h6标签:有默认margin(top,bottom且相同)值,没有默认padding值. 在chrome中:16,15,14,16,17,19; 在firefox中:16,15,14,16, ...

  6. 关于margin padding

    margin padding设置百分比是以父元素的宽度作参考. 定位的left,top等取百分比 则以参照定位元素的padding+width做参考 margin 四个同时设定 以margin-lef ...

  7. 巧用margin/padding的百分比值实现高度自适应

    原文:https://segmentfault.com/a/1190000004231995 一个基础却又容易混淆的css知识点 本文依赖于一个基础却又容易混淆的css知识点:当margin/padd ...

  8. CSS网页宽度怎么定比较合适

    设计网页的时候,确定宽度是一件很苦恼的事.以nowamagic.net为例,根据Google Analytics的统计,半年多以来,访问者的屏幕分辨率一共有81种.最小的分辨率是122x160,这应该 ...

  9. html标签默认属性值之margin;padding值

    一.h1~h6标签:有默认margin(top,bottom且相同)值,没有默认padding值. 在chrome中:16,15,14,16,17,19; 在firefox中:16,15,14,16, ...

随机推荐

  1. 文件下载-SpringMVC中測试

    直接改动文件路径就能够.其它都不须要改动,帮助类已经为大家写好,可直接使用 1.Scroller: /** * 下载文件 * @author liupeng * @param request * @p ...

  2. 【VMware混合云】掀起你的盖头来

    作者:范军 (Frank Fan) 新浪微博:@frankfan7   微信:frankfan7 VMware混合云服务(vCHS)预计在2013年8月23日正式面向用户推出.目前开放服务的四个数据中 ...

  3. Android分屏显示LogCat

    Eclipse里有非常多界面组件,文件列表.编辑区.类结构等等,在这么多界面组件里,再打开一个Logcat就基本没有什么空间了.与其挤在一起还不如分开成两个窗体. 或者你有两个屏幕,想一个屏幕编辑,一 ...

  4. windows phone (26) ApplicationBar应用程序栏

    原文:windows phone (26) ApplicationBar应用程序栏 在应用程序中,如果需要几个按钮或者菜单来执行一些普通的命令,就应该考虑使用ApplicationBar,因为silv ...

  5. Google Maps Android API v2 (2)- 地图对象

    地图对象 Android的谷歌地图API允许你在你的Andr​​oid应用程序中显示谷歌地图.在谷歌地图移动(GMM)的应用程序,你看到的地图,这些地图具有相同的外观和API暴露出许多相同的功能.GM ...

  6. 转: 第二章 IoC Annotation注入

    http://blog.csdn.net/p_3er/article/details/9231307 1.命名空间 使用Annotation的方式,需要在spring的配置文件中配置命名空间.命名空间 ...

  7. iOS_11_tableViewCell使用alertView变更数据

    最后效果图: Girl.h // // Girl.h // 11_tableView的使用_红楼梦 // // Created by beyond on 14-7-26. // Copyright ( ...

  8. Codeforces Round #223 (Div. 2)--A. Sereja and Dima

    Sereja and Dima time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...

  9. 乐在其中设计模式(C#) - 责任链模式(Chain of Responsibility Pattern)

    原文:乐在其中设计模式(C#) - 责任链模式(Chain of Responsibility Pattern) [索引页][源码下载] 乐在其中设计模式(C#) - 责任链模式(Chain of R ...

  10. POJ 2155 D区段树

    POJ 2155  D区段树 思考:D区段树是每个节点设置一个段树树. 刚開始由于题目是求A[I,J],然后在y查询那直接ans^=Map[i][j]的时候没看懂.后面自己把图画出来了才理解. 由于仅 ...