浏览器
双核浏览器
游戏浏览器
高速浏览器
视频浏览器
IE浏览器
浏览器周边
手机浏览器
安卓游戏
音乐舞蹈
养成游戏
儿童游戏
仙侠手游
角色扮演
策略塔防
休闲益智
动作冒险
飞行射击
模拟经营
体育运动
赛车竞速
网络游戏
安卓软件
资讯阅读
生活服务
影音播放
购物理财
效率办公
趣味娱乐
交通出行
学习教育
摄影图像
在线音乐
系统工具
网络购物
聊天工具
安全杀毒
图片编辑
新闻资讯
软件资讯
游戏资讯
手机教程
手游攻略
游戏攻略
软件教程
IE专区
安卓专题
文章合集
电脑软件专题
安全软件
杀毒软件
系统安全
加密解密
防火墙
远程控制
木马查杀
影音软件
网络电视
视频播放
音乐播放
视频制作
音频编辑
录音录像
教育学习
外语学习
教育管理
早教启蒙
在线课堂
成人教育
资格考试
聊天社交
即时通讯
视频聊天
在线交友
变声器
表情包
办公软件
线上会议
文档管理
行业管理
考勤打卡
应用工具
输入法
下载工具
时钟日历
记事本
文件管理
计算器
编程开发
编程工具
JAVA相关
加壳脱壳
编程控件
数据库
网页源码
软件开发
补丁制作
系统美化
桌面制作
壁纸大全
系统主题
屏幕保护
桌面辅助
系统软件
系统优化
备份还原
系统检测
U盘工具
磁盘工具
驱动补丁
图文处理
图片素材
图像处理
图片制作
图片压缩
电子相册
抓图工具
其他软件
电子书籍
模拟器
辅助工具
交通出行
手机管理
其他工具
素材下载
字体素材
PPT素材
专区
文章合集
软件
游戏
浏览器
安卓专题
软件
游戏
浏览器
IEfans/ IE专区/ IE修复 /div+css学习笔记(IE与fox好多不兼容的问题)

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

2023-06-18 22:30:01 编辑:匿名

一直用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=no scroll属性,必须定义overflow:hidden;而且要在html标签下,不能在body下
html{
overflow:hidden;
}
7.ff不支持数据岛绑定xml id=news src=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可以支持吧。这之前,可以试试
style=table-layout:fixed;word-wrap: break-word (当它是英文的时候就不能正常换行了)
9.目前FF2.0为止都不支持IE的name锚点
像这种写法都是不支持的:a href=### onclick=history.go(-1)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' //无空格,锚点无作用
锚点的写法又十分讲究,比如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); 一个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浏览器是少数,即使在ff下 没有图片过度特效,其实也没什么,
还是很流畅,不过就是看不到ie里面的美而已。
11.ff下链接的onclick事件不起作用
div id=bigwhatwedo a href=javascript:onclick = display('whatwedo') target=我们做什么/a/div 在ie下没有问题,在ff下点击了没有反应。作了多次尝试,换成onclick=display('whatwedo')仍然不行,后来通过多次检查,搜索仍然找不到门路,最后采用惯用的方法--一步一步alert();出来看效果,原来他妈的是一个id的值写错了,但奇怪的是ie下面没有关系?是 ie的容错内容太强了还是火狐的容错内容太差了?不过还是喜欢火狐的严谨和标准哈。可以让人发现不少深层次的东西。哈哈。
12.ff中div定位不能通过js初始化 必须先设定值并且要设定度量单位 top:80px;left:212px;
13.ff不能用.click();方法打开链接,终于暂时性的解决了
diva href=# onclick=test1(2) id=a3_ahello/a /div
div
a href= onclick =test2(1) id=b3hello2/a/div
diva href=javascript:onclick =test2(1) id=b3hello3/a触发事件放在href=javascript:onclick =test2(1) 里面ff无效/div
div onclick=test2(1) id=b3hello3/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')的方式火狐不支持打开第一个链接,火狐必须用onclick=display('whoweare')
本以为火狐浏览器使用的人很多,但从网站的统计分析来看火狐只有可怜的3.18%,但兼容他的标准确花费不少精力!不过标准化有利于以后的维护和扩展,有利于技术的不断提示。
--
14.OVERFLOW-Y:auto;OVERFLOW-X:hidden;在ie里面可以用no表示隐藏,但在ff里面必须用hidden
-------------------------
总结一下:目前有十个不兼容问题,还没解决的有:
4.ff不支持div滚动条的颜色设置,目前还没有找到替换的好方法,在许多标准化的网站看到也是没有解决这个问题。
7.ff不支持数据岛绑定xml id=news src=news.xml /xml在ie下可以加载进数据,但到了火狐就加载不进数据了,开始以为可能是因为内容行文字太多导致不能断行不能加载,但删除只剩几个字以后一样不行。用w3c代码检测软件检测了一下,原来是自定义的xml标签通不过,所以火狐就不认了。
10.火狐不支持滤镜filter,无法实现图片切换中间变换的效果,只能通过透明度来设置,但很麻烦.(这个目前暂不实现了)

相关推荐

浏览器更新