div+css学习培训笔记(IE与fox许多兼容问题的难题

日期:2021-03-14 类型:科技新闻 

关键词:公众号小程序,小程序正规价格表,微信群签到小程序,网络抽签小程序,个人做小程序需要什么

1直用ie为准做网页页面,今日到火狐官网下了个沒有google软件的安裝了(非常反感软件,而中国基本上免费下载不到沒有google软件的火狐访问器!)
开启1看,哇哈,终究来了,ff许多兼容问题的难题来了。随意点一下了下兼容问题的难题就有上10个了。1个个渐渐地处理,渐渐地检索。。。。。。。先把几个简易的梳理共享1下。
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⑶DLIGHT-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;
}
假如界定4个值,那末这4个值就各自是上,右,下,左侧框的宽度值(从上边框刚开始,以逆时针的次序遍历).
等额的于下面的界定
p#fourborders
{
border-top-width:thick;
border-right-width:medium;
border-bottom-width:thin;
border-left-width:12px;
}
6.ff不适用<body scroll="no" > scroll特性,务必界定overflow:hidden;并且要在html标识下,不可以在body下
html{
overflow:hidden;
}
7.ff不适用数据信息岛关联<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.现阶段FF2.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.ff火狐下面不适用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访问器是极少数,即便在ff下 沒有照片过多殊效,实际上也没甚么,
還是很顺畅,但是便是看不见ie里边的美罢了。
11.ff下连接的onclick恶性事件不起功效
<div id="bigwhatwedo" ><a href="javascript:onclick = display('whatwedo')" target="">大家做甚么</a></div> 在ie下沒有难题,在ff下点一下了沒有反映。作了数次尝试,换为onclick="display('whatwedo')"依然不好,后来根据数次查验,检索依然找不到道路,最终选用常用的方式--1步1步alert();出看来实际效果,原先他妈的是1个id的值写错了,但怪异的是ie下面沒有关联?是 ie的容错机制內容太强了還是火狐的容错机制內容太差了?但是還是喜爱火狐的认真细致和规范哈。可让人发现很多深层次次的物品。哈哈。
12.ff中div精准定位不可以根据js原始化 务必先设置值而且要设置衡量企业 top:80px;left:212px;
13.ff不可以用.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)" 里边ff失效</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%,但适配他的规范确花销很多活力!但是规范化有益于之后的维护保养和拓展,有益于技术性的持续提醒。
-->
14.OVERFLOW-Y:auto;OVERFLOW-X:hidden;在ie里边能够用no表明掩藏,但在ff里边务必用hidden
-------------------------
总结1下:现阶段有10个兼容问题难题,还没处理的有:
4.ff不适用div翻转条的色调设定,现阶段都还没寻找更换的好方式,在很多规范化的网站看到也是沒有处理这个难题。
7.ff不适用数据信息岛关联<xml id="news" src="news.xml" ></xml>在ie下能够载入进数据信息,但到了火狐就载入不进数据信息了,刚开始认为将会是由于內容写作字太多致使不可以断行不可以载入,但删掉只剩几个字之后1样不好。用w3c编码检验手机软件检验了1下,原先是自定的xml标识通但是,因此火狐就不认了。
10.火狐不适用滤镜filter,没法完成照片切换正中间转换的实际效果,只能根据全透明度来设定,但很不便.(这个现阶段暂不完成了)