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

在设计网页页面的时候,我通常会用DIV+CSS布局页面,但CSS就会存在一些与浏览器IE和其他(Mozilla、Opera等)浏览器里显示的兼容问题。看了一些文章后发现:1、用!important能解决IE6和Mozilla的布局差别。语法格式:{ sRule!important }IE6不支持这个语法,而IE7,FF都支持。因此我们就可以利用这一点来分别给IE和其他浏览器不同的样式定义。

在设计网页页面的时候,我通常会用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布局的利器,请记住和掌握它吧:)。个人喜欢用这种写法。当然下面也是另一种写法。

2、另一种写法: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 */

<div id="item">往尚空间</div>

可以看到高度不一样。

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

发表评论

登录后才能评论