CSS的一些浏览器兼容性

1. cursor:hand   VS   cursor:pointer

firefox不支持hand,但ie支持pointer
解决方法:   统一使用pointer

2.innerText在IE中能正常工作,但在FireFox中却不行.

需用textContent。
解决方法:

if(navigator.appName.indexOf("Explorer")   >   -1){
        document.getElementById(‘element‘).innerText   =   "my   text";
}   else{
        document.getElementById(‘element‘).textContent   =   "my   text";
}

3.CSS透明

IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF:opacity:0.6。

4.css中的width和padding

在IE7和FF中width宽度不包括padding,在Ie6中包括padding.

5.FF和IEBOX模型解释不一致导致相差2px

box.style{width:100;border 1px;} 
ie理解为box.width = 100 
ff理解为box.width = 100 + 1*2 = 102  //加上边框2px

解决方法:

div{margin:30px!important;margin:28px;}

注意这两个margin的顺序一定不能写反, IE不能识别!important这个属性,但别的浏览器可以识别。所以在IE下其实解释成这样:div{maring:30px;margin:28px}
重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;

6.IE5和IE6的BOX解释不一致

IE5下

div{width:300px;margin:0 10px 0 10px;}

div 的宽度会被解释为300px-10px(右填充)-10px(左填充),最终div的宽度为280px,而在IE6和其他浏览器上宽度则是以 300px+10px(右填充)+10px(左填充)=320px来计算的。

这时我们可以做如下修改

div{width:300px!important;width:340px;margin:0 10px 0 10px}

7.ul和ol列表缩进问题

消除ul、ol等列表的缩进时,样式应写成:

list-style:none;margin:0px;padding:0px;

经验证:

在IE中,设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点,设置padding对样式没有影响;

在 Firefox 中,设置margin:0px仅仅可以去除上下的空白,设置padding:0px后仅仅可以去掉左右缩进,还必须设置list- style:none才能去除列表编号或圆点。

也就是说,在IE中仅仅设置margin:0px即可达到最终效果;

而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。  

8.IE与宽度和高度的问题

IE不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。

比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,可以这样:

#box{ width: 80px; height: 35px;}  html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

9. DIV浮动IE文本产生3象素的bug

左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距.

#box{ float:left; width:800px;}
#left{ float:left; width:50%;}
#right{ width:50%;}
*html #left{ margin-right:-3px; //这句是关键}
<div id="box">
<div id="left"></div>
<div id="right"></div>
</div>

10. 高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用margin 或padding时。

例:

#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
<div id="box">
    <p>p对象中的内容</p>
</div>

解决技巧:在P对象上下各加2个空的div对象CSS代码{height:0px;overflow:hidden;}或者为DIV加上border属性。

11.IE6下图片下有空隙产生

解决这个BUG的技巧有很多,可以是改变html的排版,或者设置img为display:block或者设置vertical-align属性为vertical-align:top/bottom/middle/text-bottom 都可以解决.

12.超链接访问过后hover样式就不出现的问题

被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序: L-V-H-A

Code:
<style type="text/css">
<!--
a:link {}
a:visited {}
a:hover {}
a:active {}
-->
</style>

  

时间: 2024-10-11 18:14:39

CSS的一些浏览器兼容性的相关文章

css专题学习-浏览器兼容性问题目录

此帖是我所分享的浏览器兼容性问题相关的所有目录. [分享]浏览器兼容性问题综述 -- 正确的认识浏览器兼容性问题 [分享]你的元素居中对齐了吗? --- 关于 'text-align:center' 的问题 [分享]<a>标签的伪类书写顺序问题 [分享]IE6 中 A 标签 hover 伪类特殊性过高的问题 [分享]深入挖掘document.getElementsByTagName()方法的返回值 [分享]警惕你的 Date 对象 [分享]重新认识IE盒模型bug [分享]你知道吗?--- 表

css中常见浏览器兼容性问题

浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大. 碰到频率:100% 解决方案:CSS里 *{margin:0;padding:0;} 备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0. 浏览器兼容问题二:块属性标签float后,又有横行的margin情况下,在IE6显示 margin比设置的大 问题症状:常见症状是I

sass转css并处理浏览器兼容性

一.大前提,你必须安装必备的环境 node.js 安装cnpm解决下载卡顿 命令:npm install -g cnpm --registry=https://registry.npm.taobao.org 查看官网api:https://www.gulpjs.com.cn/docs/getting-started/quick-start/ 安装gulp 查看官网api:npm install --global gulp-cli 查看官网api:https://www.gulpjs.com.cn

浏览器兼容性问题(待更新)

1.对于不支持渐变的浏览器,可以添加浏览器前缀来适应渐变效果 浏览器前缀: Firefox :-moz- Chrome & Safari :-webkit- Opera : -o- IE : -ms- 2.如果浏览器不支持属性的话,前缀则加载属性名称前 ex: animation : css3中做动画的属性 -moz-aniamtion:值;/*火狐*/ -webkit-animation:值;/*Chrome&Safari*/ -o-aniamtion:值;/*Opera*/ 3.如果浏

CSS实现跨浏览器的box-shadow盒阴影效果(2)

一.前言 我之前曾写过一篇关于实现跨浏览器实现box-shadow效果的文章,本文虽然题目类似,但是核心部分是有差异的.前面的文章虽然实现IE下的盒阴影效果也是使用的滤镜,但是使用的是shadow滤镜,这种滤镜的效果很牵强,效果过渡不自然,见下图: 您可以狠狠地点击这里:IE下阴影不自然demo 而本文实现的IE下的盒阴影效果就相对非常自然,而且还支持内阴影的UI表现.到底是如何实现的,究竟效果如果,请继续浏览. 二.浏览器纯爷们模式下的支持情况 CSS3 box-shadow属性基本上所有的现

CSS 多浏览器兼容性问题及解决方案

css的兼容性也是大家关注的热点.大家一定要注意多测试. Javascript 多浏览器兼容性问题及解决方案 兼容性处理要点1.DOCTYPE 影响 CSS 处理 2.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width 3.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式 4.div 的垂直居中问题: vertical-

浏览器兼容性问题解决方案之CSS,已在IE、FF、Chrome测试

当前主浏览器的核心是什么? 1) Trident:IE浏览器使用的内核,该内核程序在1997年的IE4中首次被采用,是微软在Mosaic代码的基础之上修改而来的,并沿用到目前的 IE7.Trident实际上是一款开放的内核,其接口内核设计的相当成熟,因此才有许多采用IE内核而非IE的浏览器涌现(如 Maxthon.TheWorld .TT.GreenBrowser.AvantBrowser等). 2) Geckos: Netcape6开始采用的内核,后来的FF也采用了该内核,Geckos的特点是

CSS浏览器兼容性问题

常见的CSS浏览器兼容性问题及解决方案: 1. div的垂直居中问题 CSS的vertical-align属性,是对(x)html中具有valign特性的元素才起作用的,例如,表格元素的<caption>.<th>.<td>,而像<div>.<span>这样的元素不具有valign特性,veritcal-align对这些元素不起作用.

常见CSS浏览器兼容性问题与解决方案【转载自http://blog.csdn.net/chuyuqing/article/details/37561313/】

所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果.所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题. 在学习浏览器兼容性之前,我想把前端开发人员划分为两类: 第一类是精确按照设计图开发的前端开发人员,可以说是精确到1px的,他们很容易就会发现设计图的不足,并且在很少的情况下会碰到浏览器的兼容性问题,而这些问题往往都死浏览器