FireFox火狐访问器与IE适配难题

2021-03-12 18:07 jianzhan
难题1:最简易的电脑鼠标移过手变型的css要改了 cursor:pointer;/*FireFox(火狐)不适用cursor:hand*/ dw8下面全自动出来的也沒有hand这个特性了,规范的是pointer

难题2: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"

难题3:FireFox(火狐)不适用expression 比如去掉连接的边框要各自写不一样的css

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

难题4: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⑶DLIGHT-COLOR:#F6F6F6;SCROLLBAR-HIGHLIGHT-COLOR:#F6F6F6;
}

这个在FireFox(火狐)里边彻底沒有实际效果了。

难题5: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;
}

假如界定4个值,那末这4个值就各自是上,右,下,左侧框的宽度值(从上边框刚开始,以逆时针的次序遍历).

等额的于下面的界定

p#fourborders
{
border-top-width:thick;
border-right-width:medium;
border-bottom-width:thin;
border-left-width:12px;
}

难题6:FireFox(火狐)不适用<body scroll="no" > scroll特性,务必界定overflow:hidden;并且要在html标识下,不可以在body下

html{
overflow:hidden;
}

难题7:FireFox(火狐)不适用数据信息岛关联<xml id="news" src="news.xml" ></xml>在IE下能够载入进数据信息,但到了火狐就载入不进数据信息了,刚开始认为将会是由于內容写作字太多致使不可以断行不可以载入,但删掉只剩几个字之后1样不好。

难题8:style="word-break:break-all"在网页页面中的模块格里的內容超过1行时,在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" (当它是英文的情况下就不可以一切正常换行了)

难题9:现阶段FireFox(火狐)2.0为止都不适用IE的name锚点

像这类写法全是不适用的:<a href="###" onclick="history.go(⑴)">go back</a>
原先依据W3C的英语的语法,<a>标识自始至终都会搜索href详细地址并自动跳转以往,如今onclick恶性事件与###这个详细地址又有矛盾。

以便让Firefox与IE一部分元素特性适配,那个费力,我不经意中发现Firefox对空格比较敏感:
<a onclick="window.location.href ='faq.php?page=messages#2'"> //有时间格,锚点功效
<a onclick="window.location.href='faq.php?page=messages#2'"> //无空格,锚点无功效

锚点的写法又10分注重,例如<a name=#1>,Firefox不适用锚点,得再加id=#1
静态数据同网页页面引入时务必这样写:<a href="#1"></a>,<a href="static.html#1"></a>就不好,动态性网页页面要用JS

并发症来了,考虑到到电脑鼠标款式和访问器适配又刚开始折腾:
<a href="###" onclick=""> //兼容问题
<a href="javascript:;" onclick=""> //兼容问题
<a href="javascript:function();"> //沒有{...},属于脚本制作的不法撰写
<a style="cursor:hand" onclick=""> //没照料到自定系统软件电脑鼠标款式的客户
<a href="javascript:onclick=''"> //情况栏会呈现,href有多长显示信息多长
<a href=# onclick=""> //我用的

难题10: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); 1个IE滤镜,

在其它的非IE访问器尽管不适用这个滤镜,可是适用全透明滤镜的,你能够分1下,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 这个他并不是1个渐变色的全过程。
1般这类照片过多殊效数最多不断1秒把,数最多数最多两秒 duration=2
超出2秒就很累坠,反客为主了。
在2秒钟里边完成
g_img.style.filter="alpha(opacity="+i+")" 全透明度的转变是较为累坠的事儿。
要用 window.setInterval 更改 i 的值, 并且还要启用几10上百次window.setInterval
才可以看到实际效果。
这样的话,我感觉得不赔失,是以便殊效而殊效了


此外1种考虑到是,终究非IE访问器是极少数,即便在FireFox(火狐)下 沒有照片过多殊效,实际上也没甚么,
還是很顺畅,但是便是看不见IE里边的美罢了。

难题101:FireFox(火狐)下连接的onclick恶性事件不起功效

<div id="bigwhatwedo" ><a href="javascript:onclick = display('whatwedo')" target="">大家做甚么</a></div> 在IE下沒有难题,在FireFox(火狐)下点一下了沒有反映。作了数次尝试,换为onclick="display('whatwedo')"依然不好,后来根据数次查验,检索依然找不到道路,最终选用常用的方式--1步1步alert();出看来实际效果,原先他妈的是1个id的值写错了,但怪异的是IE下面沒有关联?是IE的容错机制內容太强了還是火狐的容错机制內容太差了?但是還是喜爱火狐的认真细致和规范哈。可让人发现很多深层次次的物品。哈哈。

难题102:FireFox(火狐)中div精准定位不可以根据js原始化 务必先设置值而且要设置衡量企业 top:80px;left:212px;

难题103:FireFox(火狐)不可以用.click();方式开启连接,终究临时性的处理了

<div><a href="#" onclick="test1(2)" id="a3_a">hello</a> </div>
<div>
<a href="" 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>

<!-- 因为这里的连接是index的iframe用href="#" 在IE中没法一切正常显示信息,
而用href="javascript:onclick = display('whatwedo')"的方法火狐不适用开启第1个连接,火狐务必用onclick="display('whoweare')"
本认为火狐访问器应用的人许多,但从网站的统计分析剖析看来火狐仅有可伶的3.18%,但适配他的规范确花销很多活力!但是规范化有益于之后的维护保养和拓展,有益于技术性的持续提醒。
-->

难题104:OVERFLOW-Y:auto;OVERFLOW-X:hidden;在IE里边能够用no表明掩藏,但在FireFox(火狐)里边务必用hidden