|
|
|
|
浏览器对CSS的兼容性的问题
来自:互联网
微软的IE团队为了改进浏览器对CSS的兼容性,已经做了多个严密的修正,如修改bug,增加新特色等。
但还是不能全面支持WEB标准,这意味着有一些网页将在不一样的浏览器下变形。
1.Firefox: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行
2.Firefox: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中
3.Firefox: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width
4.Firefox: 支持 !important, IE 则忽略, 可用 !important 为 Firefox 特别设置样式,值得注意的是,一定要将xxxx !important 这句放置在另一句之上
5.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行
6.cursor: pointer 可以同时在 IE 、Firefox 中显示游标手指状, hand 仅 IE 可以
7.Firefox: 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。
8.在firefox和IE中的BOX模型解释不一致导致相差2px解决方法:div{margin:30px!important;margin:28px;}
注意这两个margin的顺序一定不能写反,!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:div{maring:30px;margin:28px}
9.ul标签在firefox中默认是有padding值的,而在IE中只有margin有值所以先定义ul{margin:0;padding:0;}就能解决大部分问题
随着IE7浏览器的发布,对CSS的支持又有新问题。浏览器多了,网页兼容性更差了,为解决IE7.0的兼容问题,现在我大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7对!important可以正确解释,会导致页面没按要求显示!搜索了一下,找到一个针对IE7不错的hack方式就是使用“*+html”,现在用IE7浏览一下,应该没有问题了。
现在写一个CSS可以这样 :
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */
那么在firefox下字体颜色显示为#333,IE6下字体颜色显示为#666,IE7下字体颜色显示为#999,他们都互不干扰。
|
| |
|
|
|
威德网络是一家致力于网站建设、互联网应用系统开发及应用软件开发于一体网络科技公司,威德网络提供网站建设与网站
推广相结合的网站建设方案,面向政府及企、事业单位网站建设服务,由专业网站设计人员结合搜索引擎优化经验为您制作网站;
威德网络联拥有专业水平的网站建设队伍,具有丰富的网站设计制作经验,设计风格可以根据客户的要求,为我们服务的客户提
供一流的网站建设和网页设计服务,认真聆听每一位客户的需求,竭尽我们所能为您提供最贴心、最便利的服务,让您轻松坐享成功!
|
|
 |
| ·客服专线 |
| 010-69799063(直线) |
| 010-69799063-01/02/03 |
| ·咨询专线 |
| 13691136792 |
| 13126606892 |
| 13671320382 |
|
|
|
|
|
|