IE和Mozilla的布局差别解决方案

Vedu • 2009-10-15 06:30 • 技术资讯 • 阅读 1529

在设计网页页面的时候，我通常会用DIV+CSS布局页面，但CSS就会存在一些与浏览器IE和其他(Mozilla、Opera等)浏览器里显示的兼容问题。看了一些文章后发现：

1、用!important能解决IE6和Mozilla的布局差别。

语法格式：{ sRule!important }

IE6不支持这个语法，而IE7，FF都支持。因此我们就可以利用这一点来分别给IE和其他浏览器不同的样式定义。

如：

#item{

width:170px;

height:30px !important ;

height:150px;

border: 1px solid #000000;

}

可看到IE6是150高，IE7,FF是30的高。因此，利用!important，我们可以针对IE和非IE浏览器设置不同的样式，只要在非IE浏览器样式的后面加上!important。

注：

通常把有加!important的写在前面，因为CSS是靠近原则。FF看到加!important的就优先使用，而IE不认识!important，只有用到紧接其后的定义，所以上面#item{…}顺序调换时也将随之变化。

!important必定成为CSS布局的利器，请记住和掌握它吧:)。个人喜欢用这种写法。当然下面也是另一种写法。

２、另一种写法：IE6/IE7与FireFox：

*+html 与 *html 是IE特有的标签， firefox 暂不支持。而*+html 又为 IE7特有标签。

如：

#item { width: 80px;height:80px;border: 1px solid #FF0000;} /* FireFox */

*+html #item { width: 60px;height:200px;border: 1px solid #FF0000;} /* ie7 */

*html #item { width: 80px;height:500px;border: 1px solid #FF0000;} /* ie6 */

可以看到高度不一样。

3、另一种写法：IE6/IE7与FireFox：

	IE6	IE7	FF
*	√	√	×
!important	×	√	√

可以看到：IE都能识别*，标准浏览器(如FF)不能识别*。

另外：再补充一个，下划线“_”IE6支持下划线，IE7和firefox均不支持下划线。于是可以写如下：

#item {

width: 900px; /*for FF*/

*width: 600px;/*for ie7*/

_width: 300px;/*for ie6*/

height:200px;border: 1px solid #FF0000;}

我想理解了上面的知识相信你也该能运用自如。呵呵。。

注：书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。

iframe 没有置成透明

opacity:.0;filter: alpha( opacity=0 ); -moz-opacity:0

iframe.style.marginheight=0;

iframe.style.opacity = .0;

iframe.style.filter = ‘progid:DXImageTransform.Microsoft.Alpha(0)’;

document.getElementsByTagName("body")[0].appendChild(iframe);

*opacity:0;

filter:’progid:DXImageTransform.Microsoft.Alpha(0)。

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/tech/158.html

IE和Mozilla的布局差别解决方案

相关推荐

发表评论