FireFox火狐浏览器与IE兼容问题 - 透明滤镜 DIV滚动条

问题一：最简单的鼠标移过手变型的css要改了 cursor:pointer;/*FireFox（火狐）不支持cursor:hand*/ dw8下面自动出来的也没有hand这个属性了，标准的是pointer

问题二：FireFox（火狐）不支持滤镜最常见的半透明不支持。

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"

问题三：FireFox（火狐）不支持expression 例如去掉链接的边框要分别写不同的css

a,area { blr:expression(this.onFocus=this.blur()) } /* for IE */
:focus { outline: none; } /* for Firefox */

问题四：FireFox（火狐）不支持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;
}

这个在FireFox（火狐）里面完全没有效果了。

问
题五：IE下面显示在文字下面横线的border-width: 0px 0px 1px
0px;在FireFox（火狐）里面跑到文字上面去了。（查了手册还是没有找到解决的办法感觉莫名奇妙～～
原来是FireFox（火狐）的容错能力太差了，是下面的width: 186px;height: 0px;宽高
引起的，其实a:haver已经继承了上级的属性了，只要定义不同的样式就可以了，看来FireFox（火狐）有助于制作标准化，简洁化的网页啊，对
css的理解也更深刻，对提供css来说是个很好的帮助）

.onelinksdiv a:hover {
display: block;border-style: solid;color: #FireFox（火狐）0000;border-width: 0px 0px 1px 0px;
/*
display: block;border-style: solid; border-width: 0px 0px 1px 0px;
width: 186px;height: 0px; color: #FireFox（火狐）0000; font-size: 14px;text-align: right;
*/
}

//下面的写法在IE下面正常，但在FireFox（火狐）下是错误的

.onelinksdiv a:hover {
display: block;border: #FireFox（火狐）0000 solid; border-width: 0px 0px 1px 0px;
width: 186px;height: 0px; color: #FireFox（火狐）0000; 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;
}

问题六：FireFox（火狐）不支持<body scroll="no" > scroll属性，必须定义overflow:hidden;而且要在html标签下，不能在body下

html{
overflow:hidden;
}

问
题七：FireFox（火狐）不支持数据岛绑定<xml id="news" src="http://blog.163.com/fan_yishan/news.xml"
></xml>在IE下可以加载进数据，但到了火狐就加载不进数据了，开始以为可能是因为内容行文字太多导致不能断行不能加载，但删除
只剩几个字以后一样不行。

问题八：style="word-break:break-all"在网页中的单元格里的内容超出一行时,在
IE浏览器里定义的换行样式能够正常使用,但在firefox里却不能被支持了.style="word-break:break-all"
是MS扩展的IE专有属性，并未成为W3C标准，因而 Firefox
还不能支持它。不过MS已经将其提交到了W3C，而在W3C的CSS3的候选方案中也能看到它。希望这个属性在被W3C最终定案的为CSS3标准
后，Firefox可以支持吧。这之前，可以试试
style="table-layout:fixed;word-wrap: break-word" （当它是英文的时候就不能正常换行了）

问题九：目前FireFox（火狐）2.0为止都不支持IE的name锚点

像这种写法都是不支持的：<a href="http://blog.163.com/fan_yishan/###" onclick="history.go(-1)">go back</a>
原来根据W3C的语法，<a>标签始终都会查找href地址并跳转过去，现在onclick事件与###这个地址又有冲突。

为了让Firefox与IE部分元素属性兼容，那个费劲，我无意中发现Firefox对空格敏感：
<a onclick="window.location.href='http://blog.163.com/fan_yishan/faq.php?page=messages#2'"> //有空格，锚点作用
<a onclick="window.location.href='http://blog.163.com/fan_yishan/faq.php?page=messages#2'"> //无空格，锚点无作用

锚点的写法又十分讲究，比如<a name=#1>，Firefox不支持锚点，得加上id=#1
静
态同页面引用时必须这样写：<a
href="http://blog.163.com/fan_yishan/#1"></a>，<a
href="http://blog.163.com/fan_yishan/static.html#1"></a>就不行，动态页
面要用JS

后遗症来了，考虑到鼠标样式和浏览器兼容又开始折腾：
<a href="http://blog.163.com/fan_yishan/###" onclick=""> //不兼容
<a href="javascript:;" onclick=""> //不兼容
<a href="javascript:function();"> //没有{...},属于脚本的非法书写
<a style="cursor:hand" onclick=""> //没照顾到自定义系统鼠标样式的用户
<a href="javascript:onclick=''"> //状态栏会显现，href有多长显示多长
<a href=# onclick=""> //我用的

问题十：FireFox（火狐）火狐下面不支持document.all属性的，必需用document.getElementById('idName');

以下是我的动画切换效果，在IE下正常，到了火狐里面就不动了，修改后可以切换图片但渐隐渐现的效果就没有了。原因是火狐不支持滤镜filter,只好用半透明的div来实现了。

/*
company page
*/
function playcompanyimg()
{

window.setInterval('changecompanyimg();', interval);
}
function changecompanyimg()
{
/*
火狐下面不支持document.all属性的，必需用document.getElementById('idName');
*/
//if (document.all)
//{

/**
以下两句是在切换效果前切换背景图片的代码，number、image和idtemp要设置全局变量才可以
*/
　　 number = Math.floor(Math.random() * image.length);
idtemp.src=image[number];
//alert(number+" ii "+idtemp.src)
/**
以下两句是实现幻灯片切换效果的
*/
//alert(do_transition);
//document.all.companyimg.style.filter="progid:DXImageTransform.Microsoft.Fade(duration=2,overlap=0.4)";
/*
document.all.companyimg.style.filter="progid:DXImageTransform.Microsoft.Fade(duration=1,overlap=1)";
document.all.companyimg.filters[0].Apply();
document.all.companyimg.filters[0].Play();
*/
var companyimgidtmep = document.getElementById('companyimg');
companyimgidtmep.style.filter="progid:DXImageTransform.Microsoft.Fade(duration=1,overlap=1)";
companyimgidtmep.filters[0].Apply();
companyimgidtmep.filters[0].Play();
//}
}

参考资料：核心：FILTER:revealTrans(duration=1,transition=23); 一个IE滤镜，

在其它的非IE浏览器虽然不支持这个滤镜，但是支持透明滤镜的，你可以分一下，IE下继续使用你这个效果，而在非IE浏览器下用透明滤镜：

style.opacity
opacity = 0.5 CSS3

style.MozOpacity
-moz-opacity: 0.5 Mozilla 里等同上面这个滤镜这个滤镜也适用于Netscape

style.KHTMLOpacity
-khtml-opacity: 0.5 Safari 里的透明滤镜。

IE：
obj.filters.alpha.opacity

to meizz(梅花雪)
其实我想过你那个问题的。但是透明 opacity 这个他不是一个渐变的过程。
一般这种图片过度特效最多持续一秒把，最多最多两秒 duration=2
超过2秒就很累赘，喧宾夺主了。
在2秒钟里面实现
g_img.style.filter="alpha(opacity="+i+")" 透明度的变化是比较累赘的事情。
要用 window.setInterval 改变 i 的值，而且还要调用几十上百次window.setInterval
才能看到效果。
这样的话，我觉得得不赔失，是为了特效而特效了

另外一种考虑是，毕竟非IE浏览器是少数，即使在FireFox（火狐）下没有图片过度特效，其实也没什么，
还是很流畅，不过就是看不到IE里面的美而已。

问题十一：FireFox（火狐）下链接的onclick事件不起作用

<div
id="bigwhatwedo" ><a href="javascript:onclick =
display('whatwedo')" target="">我们做什么</a></div>
在IE下没有问题，在FireFox（火狐）下点击了没有反应。作了多次尝试，换成onclick="display('whatwedo')"仍然不
行，后来通过多次检查，搜索仍然找不到门路，最后采用惯用的方法－－一步一步alert();出来看效果，原来他妈的是一个id的值写错了，但奇怪的是
IE下面没有关系？是IE的容错内容太强了还是火狐的容错内容太差了？不过还是喜欢火狐的严谨和标准哈。可以让人发现不少深层次的东西。哈哈。

问题十二：FireFox（火狐）中div定位不能通过js初始化必须先设定值并且要设定度量单位 top:80px;left:212px;

问题十三：FireFox（火狐）不能用.click();方法打开链接，终于暂时性的解决了

<div><a href="http://blog.163.com/fan_yishan/#" onclick="test1(2)" id="a3_a">hello</a> </div>
<div>
<a href="http://blog.163.com/fan_yishan/" onclick ="test2(1)" id="b3">hello2</a></div>
<div><a
href="javascript:onclick =test2(1)"
id="b3">hello3</a>触发事件放在href="javascript:onclick =test2(1)"
里面FireFox（火狐）无效</div>
<div onclick="test2(1)" id="b3">hello3</div>
<script language="javascript">
<!--
function test1(num)
{
window.alert(num);
}
function test2(num)
{
var aaa_a = document.getElementById("a3_a");
if(document.all) {//if(getOs()=="MSIE"){//IE的处理
aaa_a.click();
}
else
{
var evt = document.createEvent("MouseEvents");
evt.initEvent("click",true,true);
aaa_a.dispatchEvent(evt);
}
}

判断浏览器类型

*/
function getOs()
{
var OsObject = "";
if(navigator.userAgent.indexOf("MSIE")>0) {
return "MSIE";
}
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
return "Firefox";
}
if(isSafari=navigator.userAgent.indexOf("Safari")>0) {
return "Safari";
}
if(isCamino=navigator.userAgent.indexOf("Camino")>0){
return "Camino";
}
if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){
return "Gecko";
}

}

//--> </script>

问题十四：OVERFLOW-Y:auto;OVERFLOW-X:hidden;在IE里面可以用no表示隐藏，但在FireFox（火狐）里面必须用hidden
转自 http://www.jb51.net/css/33709.html

FireFox火狐浏览器与IE兼容问题 - 透明滤镜 DIV滚动条的更多相关文章

无障碍阅读：页面缩放兼容性处理（zoom,Firefox火狐浏览器）
1.无障碍阅读使用场景无障碍阅读一般在政府类网站使用比较多,如: 天津海事局(http://www.tjmsa.gov.cn/),其中天津海事局的页面放大和页面缩小在firefox浏览器下存在bug ...
firefox火狐浏览器过滤广告插件：Adblock Plus
firefox火狐浏览器过滤广告插件:Adblock Plus
制作便携版 FireFox 火狐浏览器
Firefox是一款可高度自定义的开源浏览器: 你可以访问火狐DIY 定制自己的Firefox安装包, 此外,你还可以自己动手定制一款可以放在U盘随身携带的便携版Firefox火狐浏览器. 制作便携 ...
Firefox火狐浏览器接口调试工具 JSON 格式化
作为一名“IT界”的淫才,还是主攻Web端的淫才,相信大家经常会联调各种接口! 如今APP猖狂的年代接口联调更为频繁,当然我们常用于Firefox火狐浏览器,所以这里主要讲Firefox火狐浏览器 ...
解决 Firefox 火狐浏览器下载 .exe 文件卡住的问题以及关闭测试版cache2
解决 Firefox 火狐浏览器下载 .exe 文件卡住的问题在firefox浏览器地址栏里输入:about:config 点“我保证会小心”,显示firefox的高级配置列表在配置页面的搜索框里 ...
Ubuntu16.04安装官方Firefox 火狐浏览器延长支持版（Extended Support Release, 简称“ESR”）
Ubuntu16.04安装官方Firefox 火狐浏览器延长支持版(Extended Support Release, 简称“ESR”) 延长支持版本(Extended Support Releas ...
【转】关闭firefox火狐浏览器下载完成时自动扫描（49.0.2以后版本）
用firefox火狐浏览器下载文件到最后时,会显示"剩余时间未知",将持续10秒钟左右,即使几KB 的文件,也要持续这么长时间,问度娘才知道是自动扫描,检查是否有毒,用的却是Goo ...
IE, FireFox, Opera 浏览器支持CSS实现Alpha透明的方法兼容问题
一:要解决的问题时:在ie6-ie11下兼容下面透明上传文件button的效果. 实现方式通过滤镜实现. 二:效果图例如以下: watermark/2/text/aHR0cDovL2Jsb2cuY3N ...
用FireFox火狐浏览器的3D Tilt 插件查看网页3D视图效果
逛博客发现了网页的3D视图效果,一搜原来是Firefox特有的一个功能,先看效果: 相当炫酷,接下来介绍如何实现. 1.首先安装3d tilt 插件: 从火狐浏览器的添加插件页面,搜索:3D Tilt ...

随机推荐

查看现有运行的linux服务器有多少内存条
i161 admin # ssh 192.168.5.209 dmidecode | grep 'Ending Address' -B1 -A2 Starting Address: 0x0000 ...
SSHPASS支持从命令行输入密码
参考:http://www.2cto.com/os/201307/227911.html 手动下载地址:http://sourceforge.net/projects/sshpass/ 安装示例: w ...
msysgit ls 中文显示
2013年10月17日 14:54:15 安装了新版的msysgit后,在其自带的 git bash 命令行下就可以输入中文汉字了但是创建了中文名字命名的文件后,再用 ls 命令查询时会出现乱码的情 ...
HDU 1087 Super Jumping! Jumping! Jumping! 最大递增子序列
Super Jumping! Jumping! Jumping! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 ...
2014 牡丹江现场赛 A.Average Score（zoj 3819）解题报告
题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5373 题目意思: 有两个class:A 和 B,Bob 在 Clas ...
NEFU 2016省赛演练一 B题（递推）
HK Problem:B Time Limit:2000ms Memory Limit:65535K Description yy is interested in numbers and yy nu ...
C++语法初始化列表数组引用
只能在初始化列表initilizationlist中初始化的有: 1.const修饰的数据成员或者reference参考 2.基类的构造函数注意,数组不能引用,亦即以下代码是不对的 void fun ...
openGL纹理映射参数解析
GLuinttexture[1]; AUX_RGBImageRec *TextureImage[1]; Status=TRUE; // Set The Status To TRUE glGenText ...
windows下同时安装python2与python3
由于python2与python3并不相互兼容,并且差别较大,所以有时需要同时安装,但在操作命令行时,怎么区别python2与python3呢? 1.下载并安装Python 2.7.9和Python ...
Linux查询网址
1.man查询手册 LINUX MAN PAGES ONLINE: http://man.he.net/ 2.编码规范 https://www.kernel.org/doc/Documentation ...

FireFox火狐浏览器与IE兼容问题 - 透明滤镜 DIV滚动条

FireFox火狐浏览器与IE兼容问题 - 透明滤镜 DIV滚动条的更多相关文章

随机推荐

热门专题