CSS浏览器兼容问题整理
CSS浏览器兼容问题整理 .Yrs147 { display:none; }
17.为什么无法定义1px左右高度的容器 IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px
18.怎么样才能让层显示在FLASH之上呢 解决的办法是给FLASH设置透明 <param name="wmode" value="transparent" />
19.怎样使一个层垂直居中于浏览器中 这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二 <styletype="text/css"> <!-- div {? ?? ?position:absolute;? ???top:50%;? ?? ?lef:50%;? ?? ?margin:-100px 0 0 -100px;? ???width:200px;? ?? ?height:200px;? ?? ?border:1px solid red;? ?? ?}--> </style>? ?
FF与IE??
1. Div居中问题? ?div设置 margin-left, margin-right 为 auto 时已经居中，IE 不行，IE需要设定body居中，首先在父级元素定义text-algin: center;这个的意思就是在父级元素内的内容居中。? ?
2.链接(a标签)的边框与背景? ?a 链接加边框和背景色，需设置 display: block, 同时设置 float: left保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在menubar 中插入一个空格。
3.超链接访问过后hover样式就不出现的问题被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-ACode: <style type="text/css"> <!-- a:link {} a:visited {}a:hover {} a:active {} --> </style>? ?
4. 游标手指cursor? ? cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以??
5.UL的padding与margin? ?ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值,所以先定义 ul{margin:0;padding:0;}就能解决大部分问题? ?
6.FORM标签??这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和padding,针对上面两个问题,我的css中一般首先都使用这样的样式ul,form{margin:0;padding:0;}给定义死了,所以后面就不会为这个头疼了.??
7. BOX模型解释不一致问题? ?在FF和IE中的BOX模型解释不一致导致相差2px解决方法：div{margin:30px!important;margin:28px;} 注意这两个margin的顺序一定不能写反， important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样： div{maring:30px;margin:28px}重复定义的话按照最后一个来执行，所以不可以只写margin:xxpx!important;? ???#box{ width:600px; //for ie6.0- w\idth:500px; //forff+ie6.0}? ? #box{ width:600px!important //for ff width:600px; //forff+ie6.0 width /**/:500px; //for ie6.0-}??
8.属性选择器(这个不能算是兼容,是隐藏css的一个bug)? ? p[id]{}div[id]{}? ?这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用.属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.??
9.最狠的手段 - !important;? ?如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略.如下? ?.tabd1{?? background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important;/*Style for FF*/? ? background:url(/res/images/up/tab1.gif) no-repeat1px 0px; /* Style for IE */}? ?值得注意的是，一定要将xxxx !important这句放置在另一句之上，上面已经提过? ?
10.IE,FF的默认值问题??或许你一直在抱怨为什么要专门为IE和FF写不同的CSS，为什么IE这样让人头疼，然后一边写css，一边咒骂那个可恶的M$IE.其实对于css的标准支持方面，IE并没有我们想象的那么可恶，关键在于IE和FF的默认值不一样而已，掌握了这个技巧，你会发现写出兼容FF和IE的css并不是那么困难，或许对于简单的css，你完全可以不用”!important”这个东西了。? ?我们都知道，浏览器在显示网页的时候，都会根据网页的css样式表来决定如何显示，但是我们在样式表中未必会将所有的元素都进行了具体的描述，当然也没有必要那么做，所以对于那些没有描述的属性，浏览器将采用内置默认的方式来进行显示，譬如文字，如果你没有在css中指定颜色，那么浏览器将采用黑色或者
IE6,IE7,FF? ?IE7.0出来了，对CSS的支持又有新问题。浏览器多了，网页兼容性更差了，疲于奔命的还是我们 ，为解决IE7.0的兼容问题，找来了下面这篇文章：现在我大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！下面是三个浏览器的兼容性收集.??
第一种，是CSSHACK的方法? ? height:20px; /*For Firefox*/? ? *height:25px; /*For IE7& IE6*/? ? _height:20px; /*For IE6*/? ? 注意顺序。? ? 这样也属于CSSHACK，不过没有上面这样简洁。? ? #example { color: #333; } /* Moz */? ? * html#example { color: #666; } /* IE6 */? ? *+html #example { color: #999; }/* IE7 */? ?
? ? <!--其他浏览器 -->? ? <linkrel="stylesheet" type="text/css" href="css.css" />? ? <!--[if IE7]>? ? <!-- 适合于IE7 -->? ? <link rel="stylesheet"type="text/css" href="ie7.css" />? ? <![endif]-->? ?<!--[if lte IE 6]>? ? <!-- 适合于IE6及一下 -->? ? <linkrel="stylesheet" type="text/css" href="ie.css" />? ?<![endif]-->? ?
第三种，css filter的办法，以下为经典从国外网站翻译过来的。.? ?新建一个css样式如下：? ? #item {? ?? ?? ?width: 200px;? ?? ?? ?height: 200px;??? ?? ?background: red;? ? }? ???新建一个div,并使用前面定义的css的样式：? ? <divid="item">some text here</div>? ???在body表现这里加入lang属性,中文为zh：? ?<body lang="en">? ???现在对div元素再定义一个样式：? ? *:lang(en) #item{? ?? ???background:green !important;? ? }????这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式：? ? #item:empty {? ???? ?background: green !important? ? }????:empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上。? ? 对IE6和FF的兼容可以考虑以前的!important 个人比较喜欢用
