开发过程中遇到的浏览器兼容的问题总结

1. 带有链接的图片，在ie浏览器下，会自带边框，解决方法：

    加个 img{border:0px；}

2.圆角问题（border-radius)

如果要想在IE浏览器中实现圆角的效果，我们一般都会采用圆角图片的方式。用图片的话，基本就跟浏览器没有多大关系了，因为任何浏览器都支持这种方式。今天我们主要是讲解如果用CSS3样式表来实现圆角效果，值得注意的是，IE6/7/8这三个IE浏览器版本都不支持CSS3的解析，只有还不太主流的IE9支持CSS3和HTML5的标准。让IE支持CSS3的解析方法有很多种，（让IE浏览器支持HTML5标准的方法）下面介绍一种实用的让IE支持CSS3解析的方法——IE利用VML矢量可标记语言作为画笔绘出圆角：<>

 

1、下载一个压缩包，里面有一个微软的脚本文件（11KB）和一个用来测试服务器是否有正确的Content-Type的HTML文件：iecss3.rar；.htc文件是IE内核支持Web行为后用来描述此类行为的脚本文件。它们定义了一套方法和属性，程序员几乎可以把这些方法和属性应用到HTML页面上的任何元素上去。Web 行为是非常伟大的因为它们允许程序员把自定义的功能“连接”到现有的元素和控件，而不是必须让用户下载二进制文件（例如ActiveX 控件）来完成这个功能。

 

解压后，打开test.html，如果显示效果是圆角，则可以继续。

 

使用演示：

 

.main{

border: 2px solid #C0C0C0;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px;

position:relative;

z-index:2;

behavior: url(此处为ie-css3.htc文件的绝对路径);

}

Webkit内核的浏览器支持“-webkit-border-radius: 10px;”属性（10px是圆角半径），可以直接解析出圆角；Firefox浏览器支持“-moz-border-radius: 10px;”属性，也是可以直接解析出圆角；IE系浏览器则需要加上“border-radius: 15px;”的属性。

 

注意：

 

1、behavior的url里一定要填写ie-css3.htc的绝对路径，因为 IE浏览器找该文件是相对当前html文件路径来找的，所以对于Wordpress等动态程序生成的页面一定要填写绝对路径。

 

2、一定要有定位属性：position:relative;

 

3、因为在IE浏览器下这些CSS3效果的实现是要借助于VML，由VML绘制圆角或是投影效果，所以还需要一个z-index属性。z-index属性最好设置得比较大，如2。

 

4、如果在IE浏览器下某些模块无法用此渲染，可以试着绝对定位相应的层，即加上“ width: 400px; height:400px;”属性。

 

5、radius属性的10px是圆角半径，还可以给两个值如“border-radius: 10px 5px;”，这样则左上角与右下角半径为10px，右上角与左下角半径为5px。也可以赋4个值，为“上  右  下  左”。

3.透明度问题（opacity）

在ie中透明度不显示，

当我们向父元素中添加子元素的时候，就会发现子元素继承了父元素的透明度。而在某些情况下这是我们不希望发生的。即使你重新设置子元素的透明度为不透明，它仍然会继承父元素的透明度。

要怎样解决这个问题呢？我们可以使用绝对定位来使这些元素看起来像父子关系。

你会看到，在上面的Demo中左右两边的元素结构看起来好像是一样的。而其实并非如此。左边的例子是实实在在的父子元素关系，所以父元素的透明度会影响到子元素。而右边的例子其实是使用了绝对定位使它们看起来像父子关系，所以父元素的透明度并没有影响到子元素。

你可以向右边的那个例子中添加更多的元素，并且不会被“父元素”的透明度影响，因为他们根本就不是

 

的子元素，而是它的兄弟节点，但是使用了绝对定位使它们看起来是它的子元素。

关键点就在设置透明度的元素并非拥有子元素，所以它的透明度属性不会影响到页面上的其他元素。但是，同其他hack方法一样，这种方法也有缺点。

缺点：

这种方法在试图移除父元素透明度对子元素影响的情况下是非常有用的。但是它的缺点限制了它在更多场合下的应用，所以有必要把他们列出来。

1.既然这个元素（设置透明度的元素）不包含任何内容，你必须设置确定的宽度和高度，并且在它所包含内容变化的时候调整尺寸。这个缺点使得在大多数情况下不使用这种hack方法。

2.由于绝对定位的元素并不是“父元素”（指设置了透明度的元素）真正的子元素，要维持这种状况会很困难，尤其是在一些需要继承的项目中。

3.绝对定位元素是在文档流之外的，所以在页面发生变化的时候会发生布局问题。

4.需要一个额外的

标签。

转载于:https://www.cnblogs.com/liuyanxia/p/5302109.html