浏览器Hack兼容手册

最新推荐文章于 2024-07-30 17:19:26 发布

weixin_33720956

最新推荐文章于 2024-07-30 17:19:26 发布

阅读量73

点赞数

文章标签： javascript ui ViewUI

原文链接：https://my.oschina.net/luozt/blog/317097

版权

为什么80%的码农都做不了架构师？>>>

IE6/7/8部分function的type为object

在IE6/7/8下的一些原生function的type为object，如：

typeof document.createElement === "string"
typeof document.getElementById === "string"

所以，作类型判断时，返回的typeof为object时，还需判断instanceof Function

##兼容低版本的现代浏览器

虽然现代浏览器如Chrome,FF对许多新特性都支持，但它们较低的版本却不一定。所以要通过以下的方式进行兼容：

css方面：

对CSS3的样式要补全其浏览器厂商的前缀，最后才写无前缀的样式
做好不支持该CSS3样式的兼容方案，比如背景渐变有可能不支持，在前面设定一个接近渐变颜色的背景色。这点基本可做到，因为要检查IE

JS方面：

使用新特性时，先做该特性的检查。比如Function.prototype.bind检测是否存在，如果不存在，那就用一些polyfill补丁或者手动去实现这个功能再进行使用。
如果一些特性实在兼容不了，比如canvas，则做好UI方面的提示

##IE6/7实现display:inline-block

有两种方法，第一种，先声明该元素display:inline-block，触发其layout，再在第二条样式上再声明为display:inline，如：

.test{display:inline-block; /*其他样式...*/}
.test{display:inline;}

第二种方法（推荐），利用IE6/7的Css专有前缀来触发layout（感觉怎么有点像js的setTimeout）:

.test{display:inline-block; *zoom: 1; *display: inline;}

##IE6浮动块状元素双倍行距

在IE6下，当一个div在另一个div向左浮动，并且带有margin-left的样式，那么这时它的左边距是样式定义的双倍，同理如果是向右浮动和margin-right，效果是一样的。不过在此后浮动的div的边距反倒是没问题的，只是第一个有此问题。

这时，解决的方法是：简单给该div加个_display:inline;样式即可

##IE6-IE10的css hack

p{
   color: black;    /*IE10*/
   color: orange\0; /*IE8,IE9*/
  *color: blue;     /*IE6,IE7*/
  _color: red;      /*IE6*/
}
:root p{
  color: yellow\0;  /*IE9*/
}

##IE7/8下PNG图片背景有黑色的东西

那是因为你使用了滤镜效果,比如filter:alpha(opacity=100);，把它去掉就可以了

##IE7/8下元素无故消失、看不见、点击不了

在其他浏览器明明是有东西的，但来到IE7/8就无故消失了。出现这种情况，你试下给该元素添加background:red;或者之前是去掉文字的text-indent:-9999em; font-size:0;的，改为font-size:18px; text-indent:0;，你就会发现消失的元素终于又出现了。对于这种方法，解决方法是，在IE7/8下，给该元素添加背景色。但同时你不想让该元素可视，那么就加上 opacity:0; filter:alpha(opacity=0);或者加一个透明的背景图片

##IE7/8下样式载入不完全

那应该是css文件的charset声明和文件本身的编码不一致问题，将这个改正一下即可。

##IE6下父元素:hover,:active伪类状态时，无法控制子元素

实例如下，必须用js来模拟：

<style type="text/css">
.test{position: relative; width: 100px; height: 100px; background: red;}
.test:hover .p{display:none;}
.p{position: absolute; top: 0; left: 0; width: 50px; height: 50px; background: green;}
</style>

<div id="dom1" class="test">
  <span>测试文字123</span>
  <p id="dom2" class="p">p标签里的文字888888</p>
</div>

<script type="text/javascript">
function $$(id){return document.getElementById(id);}

var dom1 = $$('dom1'), dom2 = $$('dom2');

if(IE6){
  dom1.attachEvent('onmouseover', function(){
    dom2.style.display = 'none';
  });
}
</script>

##IE7下样式突然错乱

检查你的HTML文件第一行，是不是其他注释或者不正确的文档声明。IE7是个煞笔浏览器来的，它只认HTML有效第一行的代码作为文档声明，你写成HTML注释的话它会认为是文档类型，从而以怪异模式来引入。

##样式在现代浏览器生效，在IE8以下不生效

可能你用了nav, article等HTML5标签了，IE8以下不认这个东西，自动闭合了该标签，使得其子元素全部变成了其兄弟元素了。

##IE6的相对定位问题:relative父元素有padding值会导致absulute子元素定位偏差

如果一个position:relative的DIV设置了padding-left:100px;，子元素设置了position:absolute; left:10px;，在IE6中，会以这padding-left的100px作为边界，造成距离父元素边界为110px的距离了。

解决方法：使用css_hack解决：.child-elem{left:10px;_left:-90px;}

转载于:https://my.oschina.net/luozt/blog/317097