兼容问题整理

 1、浏览器默认的margin和padding不同。

解决方案：将标签的margin和padding值重置为0；

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}

2、IE6双边距bug:

问题描述：块属性标签float后，又有margin情况下，在ie6中会显示设置的margin值的两倍。

解决方案：是在float的标签样式控制中加入 display:inline;将其转化为行内属性。

.test{float:left;widtn:150px;height:150px;margin:5px 0 5px 150px; isplay:inline;}

3、在ie6，ie7中元素高度超出自己设置高度

原因：IE8以前的浏览器中会给元素设置默认的行高的高度导致的。

解决方案：加上overflow:hidden或设置line-height为更小的高度。

.test{width:150px; height:5px; line-height:0; font-size:0; background:#f00;}

或者：.test{ width:150px; height:5px; background:#f00; overflow:hidden;}

4、min-height在IE6下不起作用。

解决方案：添加 {min-height:100px; height:auto !important; height:100px;}

max-height:

{height:auto !important; height:500px; max-height:500px; overflow:hidden;}

5、透明

IE用filter:Alpha(Opacity=60)，而其他主流浏览器用 opacity:0.6;

6、a(有href属性)标签嵌套下的img标签，在IE下会带有边框。

解决办法：加上a img{border:none;}样式

7、input边框问题。

去掉input边框一般用border:none;就可以，但由于IE6在解析input样式时的BUG(优先级问题)，在IE6下无效。

解决方案：border:0或border:0 none;或border:none:border-color:transparent; 或者添加背景色background:#fff;  推荐用后两种方案。

注：border:none;与border:0的区别

性能差异：

【border:0;】把border设为0，像素虽然在页面上看不见，但按border默认值理解，浏览器依然对浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值。

【border:none;】 把border设为“none”即没有，浏览器解析“none”时将不作出渲染动作，即不会消耗内存值。

兼容性差异：

兼容性差异只针对浏览器IE6、IE7与标签button、input而言，在win、win7、vista 的XP主题下均会出现此情况。

【border:none;】当border为“none”时似乎对IE6/7无效边框依然存在；

解决该兼容问题方法：添加背景属性即可。

【border:0;】当border为“0”时，感觉比“none”更有效，所有浏览器都一致把边框隐藏。

8、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>

9、IE6下为什么图片下有空隙产生

解决方法：设置img 为display:block 或者 设置vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 都可以解决.

10、如何对齐文本与文本输入框 

解决方法：加上 vertical-align:middle; 

<style type="text/css">

input { width:200px; height:30px; border:1px solid red; vertical-align:middle; } 

</style>

11、为什么无法定义1px左右高度的容器

IE6下这个问题是因为默认的行高造成的

解决方法：overflow:hidden | zoom:0.08 | line-height:1px

12、怎么样才能让层显示在FLASH之上

解决办法：给FLASH设置透明 <param name="wmode" value="transparent" />

13、文字大小不兼容

同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff下实际占高17px，上留白1px，下留白3px。解决方案：给文字设定 line-height 。确保所有文字都有默认的 line-height 值。

14、吞吃现象

ie6，上下两个div，上面的div设置背景，却发现下面没有设置背景的div 也有了背景，这就是吞吃现象。对应上面的背景吞吃现象，还有滚动下边框缺失的现象。

解决方案：使用zoom:1。

15、注释也能产生bug“多出来的一只猪”

ie6的这个bug 下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。解决方案：用“<!–[if !IE]> picRotate start <![endif]–>”方法写注释。

16、文字跟图片并列排的时候line-height作用消失

解决方案：让文字和图片浮动起来

17、：hover伪类

只有a：hover{}没有兼容问题；  div:hover{}在ie6中不起作用（只能用js去实现）

18、iE6的问题。当层的高度小于20px时，IE6下要定义font-size：0px;否则高度为20px;

19、ff下，只有body和html同时定义height:100%,高度才为100%。IE下只需要定义body.

20.完美解决PNG图片在IE6中背景不透明的方法_解决IE6中PNG图片背景不透明方法-图例 

 

   

1、解决PNG图片在IE6中背景不透明的CSS与JS代码   -   TOP

JS代码

function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6. { var arVersion = navigator.appVersion.split("MSIE") var version = parseFloat(arVersion[1]) if ((version >= 5.5) && (document.body.filters))  { for(var j=0; j<document.images.length; j++) { var img = document.images[j] var imgName = img.src.toUpperCase() if (imgName.substring(imgName.length-3, imgName.length) == "PNG") { var imgID = (img.id) ? "id='" + img.id + "' " : "" var imgClass = (img.className) ? "class='" + img.className + "' " : "" var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' " var imgStyle = "display:inline-block;" + img.style.cssText  if (img.align == "left") imgStyle = "float:left;" + imgStyle if (img.align == "right") imgStyle = "float:right;" + imgStyle if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle var strNewHTML = "<span " + imgID + imgClass + imgTitle + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"  img.outerHTML = strNewHTML j = j-1 } } }  } window.attachEvent("onload", correctPNG);

CSS代码：
 

#id{background:url(图片路径) ;_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src="图片路径");_background:none;}

 

 

2、解决png图片在html中IMG标签使用PNG图片IE6中背景不透明方法   -   TOP

1、新建一个JS文件为iepngfx.js,进以上JS代码拷贝到JS文件里
2、在HTML中声明只有IE6读取此新建JS文件iepngfx.js中
只允许IE6读取此JS文件方法：
<!--[if IE 6]>
<script src="images/iepngfx.js" language="javascript" type="text/javascript"></script>
<![endif]-->
3、在html中使用图片标签IMG运用PNG图片，在IE6试试看PNG图片背景是否透明了。

3、在CSS中png作为网页背景时在IE6中背景透明方法   -   TOP

同样方法
1、新建JS文件同上，命名为iepngfx.js,进以上JS代码拷贝到JS文件里
2、在HTML中声明只有IE6读取此新建JS文件iepngfx.js中
只允许IE6读取此JS文件方法：
<!--[if IE 6]>
<script src="images/iepngfx.js" language="javascript" type="text/javascript"></script>
<![endif]-->
3、在CSS中运用PNG图片作为背景的地方加入以下CSS代码：

#id{background:url(图片路径) ;_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src="图片路径");_background:none;}

 

这样即可解决PNG图片在HTML中img作为图片图标背景不能透明或PNG图片作为网页背景background运用的一样实现PNG图片背景透明。

以下JS和CSS方法解决PNG图片在IE6中背景不透明方法对你有用。


21遭遇input与button按钮背景图失效不显示的解决办法 
    为网页代码中的Form表单中的input 和 button 按钮标签在CSS样式代码文件中设置了背景图background-image竟然失效不起作用不显示了！

只需加以下2行代码便可以解决CSS中设置了按钮背景图，但是浏览器中背景图失效不显示的网页前端代码兼容性问题：

 background-image: url(images/kankanbei.jpg);
 background-repeat: no-repeat;
 //关键就是将背景色设置为透明，好让背景图显示出来。这个代码在DW的IDE环境下是没有的，需要你手动输入这种背景颜色透明的CSS代码
 border:none;

最后看看呗[kankanbei.com]总结为：外部CSS代码中有某一处设置的属性导致此处按钮的原背景无法去掉，进而导致背景图片失效没显示。另外一种解决就是使用A标签来替代这些input和button标签