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可以支持吧 。这之前,可以试试

推荐阅读