云南龙网

  1. 首页 > 云知道 > >

IE与fox好多不兼容的问题 div+css学习笔记

云知道

一直用ie为准做网页，今天到火狐官方网站下了个没有google插件的安装了（特别讨厌插件，而国内几乎下载不到没有google插件的火狐浏览器！）
打开一看，哇哈，终于来了，ff好多不兼容的问题来了 。随便点击了下不兼容的问题就有上十个了 。一个个慢慢解决，慢慢搜索 。。。。。。。先把几个简单的整理分享一下 。
1.最简单的鼠标移过手变型的css要改了 cursor:pointer;/*ff不支持cursor:hand*/ dw8下面自动出来的也没有hand这个属性了，标准的是pointer
2.ff不支持滤镜 最常见的半透明不支持 。
filter: Alpha(Opacity=50); /* for IE */
opacity: .5;/* for Firefox */
style=-moz-opacity:0.5; filter:alpha(opacity=50);cursor:hand; onmouseover=this.style.MozOpacity=1;
this.filters.alpha.opacity=100 onmouseout=this.style.MozOpacity=0.5;
this.filters.alpha.opacity=50
3.ff不支持expression 例如去掉链接的边框要分别写不同的css
a,area { blr:expression(this.onFocus=this.blur()) } /* for IE */
:focus { outline: none; } /* for Firefox */
4.ff不支持div滚动条的颜色设置，目前还没有找到替换的好方法 。
.contendiv {
position: absolute; left: 0px; top: 10px; width: 580px;height: 135px;
line-height:120%;text-align:left; font-family:宋体;word-break : break-all; color:#6D6E71;
OVERFLOW-Y:auto;OVERFLOW-X:no;
SCROLLBAR-ARROW-COLOR: red; SCROLLBAR-TRACK-COLOR: F6F6F6;SCROLLBAR-FACE-COLOR:#F6F6F6;SCROLLBAR-SHADOW-COLOR:#F6F6F6;
SCROLLBAR-DARKSHADOW-COLOR:#F6F6F6;SCROLLBAR-3DLIGHT-COLOR:#F6F6F6;SCROLLBAR-HIGHLIGHT-COLOR:#F6F6F6;
}
这个在ff里面完全没有效果了 。
5.ie下面显示在文字下面横线的border-width: 0px 0px 1px 0px;在ff里面跑到文字上面去了 。（查了手册还是没有找到解决的办法感觉莫名奇妙～～ 原来是ff的容错能力太差了，是下面的width: 186px;height: 0px;宽高引起的，其实a:haver已经继承了上级的属性了，只要定义不同的样式就可以了，看来ff有助于制作标准化，简洁化的网页啊，对css的理解也更深刻，对提供css来说是个很好的帮助）
.onelinksdiv a:hover {
display: block;border-style: solid;color: #ff0000;border-width: 0px 0px 1px 0px;
/*
display: block;border-style: solid; border-width: 0px 0px 1px 0px;
width: 186px;height: 0px; color: #ff0000; font-size: 14px;text-align: right;
*/
}
//下面的写法在ie下面正常，但在ff下是错误的
.onelinksdiv a:hover {
display: block;border: #ff0000 solid; border-width: 0px 0px 1px 0px;
width: 186px;height: 0px; color: #ff0000; font-size: 14px;text-align: right;
}
相关参考资料：
border-width:border-top-width border-right-width border-bottom-width border-left-width;
p#fourborders
{
border-width:thick medium thin 12px;
}
如果定义四个值,那么这四个值就分别是上,右,下,左边框的宽度值(从上边框开始,以逆时针的顺序遍历).
等价于下面的定义
p#fourborders
{
border-top-width:thick;
border-right-width:medium;
border-bottom-width:thin;
border-left-width:12px;
}
6.ff不支持body scroll=noscroll属性，必须定义overflow:hidden;而且要在html标签下，不能在body下
html{
overflow:hidden;
}
7.ff不支持数据岛绑定xml id=news src=https://www.rkxy.com.cn/dnjc/news.xml /xml在ie下可以加载进数据，但到了火狐就加载不进数据了，开始以为可能是因为内容行文字太多导致不能断行不能加载，但删除只剩几个字以后一样不行 。
8.style=word-break:break-all在网页中的单元格里的内容超出一行时,在ie浏览器里定义的换行样式能够正常使用, 但在firefox里却不能被支持了.style=word-break:break-all 是MS扩展的IE专有属性，并未成为W3C标准，因而 Firefox 还不能支持它 。不过MS已经将其提交到了W3C，而在W3C的CSS3的候选方案中也能看到它 。希望这个属性在被W3C最终定案的为CSS3标准后，Firefox可以支持吧 。这之前，可以试试

推荐阅读


上一篇：新浪微博APP查看转账记录的方法步骤

下一篇：猿辅导退课必须联系班主任吗