码迷,mamicode.com
首页 > 其他好文 > 详细

万恶的浏览器兼容问题

时间:2015-12-08 23:53:24      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:

一 Input 框

1.谷歌火狐通过border:none; 可以去掉边框,ie6则不行,必须加一句 background:none;

如果需要背景颜色可以重新写一个input{ background:red;}

2.谷歌火狐input内部文字自动垂直居中(不需要设置line-hight),而ie不是。兼容IE需要加上一下 input { hight:30px;linehight:30px\9;} (其中\9是指所有ie浏览器)。

二. ie6的双边距bug。

块状使用了左侧浮动,浮动之后用margin-left(比如10px),则此时盒子距离左侧实际距离为20px。且如果俩盒子同事左浮,只有最左边的有双边距现象。

解决方法:在css属性加上 display:inline-block;(display设置为inline后,就改变了BUG产生的条件之一,即必须是块状元素。但是后来又看到了下面这段话:熟悉规则的人知道浮动元素自动设置为”block”元素,而不管他们之前是什么。这说明浮动元素上的{display: inline;}会被忽略,事实上所有的浏览器没有呈现任何改变,包括IE。但是,它不知何故让IE停止将浮动元素的边界翻倍。

三.Overflow :hidden

1,在ie7下,button

中文字越多则button两侧的padding越大,此时给button加上Overflow :hidden可以使不同文字但button的padding值一样大。

2.ie6 不支持overflow:hidden 清除浮动。

四.滚动条滚动高度

1. 怪异模式的浏览器(未声明DTD    

我们应该使用  document.body.scrollTop          scrollLeft

2. 标准模式的浏览器

    我们应该使用的是  document.documentElement.scrollTop; 

3. ie9+ 以上的版本以及正常浏览器  (除了ie678等)

我们跟提倡 使用  window.pageYOffset;         pageXOffset 

三种方法 都是 被卷去的头部写法。

我们兼容写法: 

var scrolltop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

五.定位

1.IE6不支持固定定位。

万恶的浏览器兼容问题

标签:

原文地址:http://www.cnblogs.com/ytu2010dt/p/5031196.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!