几个常用代码在IE8和火狐下的对比
1、Input
有的浏览器会自动给html里的首个input记录值，比如说火狐。这里就会有问题，比如你在html里有两个 input框，当你进行了一个操作是删除掉第一个input节点，并在第二个input框里输入值时，浏览器就会把第二个input作为首input，当你刷新页面时，就会把这个本该是第二input的值填充到第一个input中。
解决办法：在第一个input里加上autocomplete="off"，例如：<input id="" autocomplete="off" />
问题代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>xhEditor demo1: 默认模式</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<style type="text/css">
<!--
*{padding:0;margin:0 auto;cursor:default;font-size:12px;}
a{text-decoration:none;outline:none;color:#003256;}
a:hover{color:blue;}
a:active{color:red;}
ul,li{list-style:none;}
html,body{width:100%;height:100%;overflow:hidden;margin:0px;padding:0px;}
#wrap{width:980px;height:600px;}
-->
</style>
<script language="javascript">
function init(){
$("#wrap a").click(function(){
$("#A1").remove();
});
}
</script>
<body>
<div id="wrap">
<input type="" id="A1" value="1234" />
<input type="" id="A2" />
<a href="javascript:void(0)">删除第一个input</a>
</div>
<script language="javascript">$(document).ready(init);</script>
</body>
</html>
解决后的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>xhEditor demo1: 默认模式</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<style type="text/css">
<!--
*{padding:0;margin:0 auto;cursor:default;font-size:12px;}
a{text-decoration:none;outline:none;color:#003256;}
a:hover{color:blue;}
a:active{color:red;}
ul,li{list-style:none;}
html,body{width:100%;height:100%;overflow:hidden;margin:0px;padding:0px;}
#wrap{width:980px;height:600px;}
-->
</style>
<script language="javascript">
function init(){
$("#wrap a").click(function(){
$("#A1").remove();
});
}
</script>
<body>
<div id="wrap">
<input autocomplete="off" type="" id="A1" value="1234" />
<input type="" id="A2" />
<a href="javascript:void(0)">删除第一个input</a>
</div>
<script language="javascript">$(document).ready(init);</script>
</body>
</html>
2、Position:fixed
为了实现弹出层在弹出时底层不动的效果，在html里加了一个叫做dfix的div，他的 position的值设为fixed，当弹出弹出层时把底层放入dfix中。这是问题出现了，如果你的弹出事件是靠一个点击时间触发的，点击的框体又恰好有一个hover属性，那么当弹出层被弹出时，hover属性并不消失，即使弹出层又关闭了，hover属性依然不消失，这是在IE8中出现的怪现象，原因不明，火狐正常。
解决办法：把html里的dfix去掉，增加一个叫dfix的class，他的position属性是fixed，当弹出层被弹出时，把这个class加到底层中，当弹出层关闭时，移出这个class。
问题代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>xhEditor demo1: 默认模式</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<style type="text/css">
<!--
*{padding:0;cursor:default;font-size:12px;}
a{text-decoration:none;outline:none;color:#003256;}
a:hover{color:blue;}
a:active{color:red;}
ul,li{list-style:none;}
html,body{width:100%;height:100%;margin:0px;padding:0px;}
#wrap{width:980px;height:600px;}
#dfix{width:980px;height:600px;position:fixed;display:none;}
#A{width:200px;height:50px;text-align:center;line-height:52px;background:#fff;}
#A:hover{background:#000;color:#fff}
#B{width:200px;height:1000px;background:#fff;display:none;position:absolute;top:0;left:200px;z-index:20;}
#Mask{width:100%;height:100%;left:0;top:0;background:#f3f3f3;z-index:10;position:fixed;display:none;filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50);opacity:0.5;_width:expression(body.scrollWidth+'px');_height:expression(body.scrollHeight+'px');_position:absolute;}
-->
</style>
<script language="javascript">
function init(){
$("#A").click(function(){
$(this).appendTo("#dfix");
$("#dfix,#Mask,#B").show();
});
$("#B").click(function(){
$(this).hide();
$("#Mask,#dfix").hide();
$("#A").appendTo("#wrap");
});
}
</script>
<body>
<div id="wrap">
<div id="dfix"></div>
<div id="A">弹出层(hover时变黑)</div>
<div id="B">点击关闭弹出层</div>
<div id="Mask"></div>
</div>
<script language="javascript">$(document).ready(init);</script>
</body>
</html>
解决后的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>xhEditor demo1: 默认模式</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<style type="text/css">
<!--
*{padding:0;cursor:default;font-size:12px;}
a{text-decoration:none;outline:none;color:#003256;}
a:hover{color:blue;}
a:active{color:red;}
ul,li{list-style:none;}
html,body{width:100%;height:100%;margin:0px;padding:0px;}
#wrap{width:980px;height:600px;}
.dfix{position:fixed;}
#A{width:200px;height:50px;text-align:center;line-height:52px;background:#fff;}
#A:hover{background:#000;color:#fff}
#B{width:200px;height:1000px;background:#fff;display:none;position:absolute;top:0;left:200px;z-index:20;}
#Mask{width:100%;height:100%;left:0;top:0;background:#f3f3f3;z-index:10;position:fixed;display:none;filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50);opacity:0.5;_width:expression(body.scrollWidth+'px');_height:expression(body.scrollHeight+'px');_position:absolute;}
-->
</style>
<script language="javascript">
function init(){
$("#A").click(function(){
$(this).addClass("dfix");
$("#dfix,#Mask,#B").show();
});
$("#B").click(function(){
$(this).hide();
$("#Mask,#dfix").hide();
$("#A").remove("dfix");
});
}
</script>
<body>
<div id="wrap">
<div id="A">弹出层(hover时变黑)</div>
<div id="B">点击关闭弹出层</div>
<div id="Mask"></div>
</div>
<script language="javascript">$(document).ready(init);</script>
</body>
</html>
3、Img
一张图片，当鼠标悬停上时，出现删除按钮。做完时发现删除按钮的出现位置在IE8和火狐中不一样，经过几次尝试，发现img外必须加有一个外框才可以。
问题代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>xhEditor demo1: 默认模式</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<style type="text/css">
<!--
*{padding:0;margin:0 auto;cursor:default;font-size:12px;}
a{text-decoration:none;outline:none;color:#003256;}
a:hover{color:blue;}
a:active{color:red;}
ul,li{list-style:none;}
html,body{width:100%;height:100%;overflow:hidden;margin:0px;padding:0px;}
#wrap{width:980px;height:600px;}
#A{width:200px;height:200px;border:1px solid black;overflow:hidden;cursor:pointer;}
#A1{width:200px;height:200px;background:yellow;}
#B{width:20px;height:20px;background:red;position:relative;margin-top:-20px;display:none;}
-->
</style>
<script language="javascript">
function init(){
$("#A")
.mouseenter(function(){
$("#B").show();
})
.mouseleave(function(){
$("#B").hide();
});
}
</script>
<body>
<div id="wrap">
<li id="A">
<img id="A1" style="width:100%;height:100%;" src="http://www.zzsky.cn/build/images/20102695109.jpg" />
<div id="B"></div>
</li>
</div>
<script language="javascript">$(document).ready(init);</script>
</body>
</html>
解决后的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>xhEditor demo1: 默认模式</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<style type="text/css">
<!--
*{padding:0;margin:0 auto;cursor:default;font-size:12px;}
a{text-decoration:none;outline:none;color:#003256;}
a:hover{color:blue;}
a:active{color:red;}
ul,li{list-style:none;}
html,body{width:100%;height:100%;overflow:hidden;margin:0px;padding:0px;}
#wrap{width:980px;height:600px;}
#A{width:200px;height:200px;border:1px solid black;overflow:hidden;cursor:pointer;}
#A1{width:200px;height:200px;background:yellow;}
#B{width:20px;height:20px;background:red;position:relative;margin-top:-20px;display:none;}
-->
</style>
<script language="javascript">
function init(){
$("#A")
.mouseenter(function(){
$("#B").show();
})
.mouseleave(function(){
$("#B").hide();
});
}
</script>
<body>
<div id="wrap">
<li id="A">
<div style="width:100%;height:100%;"><img id="A1" style="width:100%;height:100%;" src="http://www.zzsky.cn/build/images/20102695109.jpg" /></div>
<div id="B"></div>
</li>
</div>
<script language="javascript">$(document).ready(init);</script>
</body>
</html>
4、border
在IE中判断border是否存在用$("#div").css("border")的值是否为undefined，在火狐中用$("#div").css("border")的值是否为"medium none"来判断。
几个常用代码在IE8和火狐下的对比相关推荐
- 怎样修改html兼容模式代码,禁止IE8使用兼容模式渲染网页的html代码
这两天在调试一个网页,有段html代码在IE8兼容模式下就会显示错乱,而在IE8的标准渲染模式下则显示正常.但是很多浏览器比如360安全浏览器和搜狗浏览器的默认IE内核就是IE8的兼容模式,所以用36 ...
- HTML介绍以及常用代码
HTML 网页基础 html(Hyper Text Markup Language)超文本标 记语言,发明者: Tim Berners-lee html主要是定义网页内容和结构的.html是编 写网页 ...
- 前端常用代码片段(四)
前端常用代码片段(一) 点这里 前端常用代码片段(二) 点这里 前端常用代码片段(三) 点这里 前端常用代码片段(四) 点这里 前端常用代码片段(五) 点这里 前端常用代码片段(六) 点这里 1.简述 ...
- pytorch常用代码
20211228 https://mp.weixin.qq.com/s/4breleAhCh6_9tvMK3WDaw 常用代码段 本文代码基于 PyTorch 1.x 版本,需要用到以下包: impo ...
- 一、PyTorch Cookbook（常用代码合集）
PyTorch Cookbook(常用代码合集) 原文链接:https://mp.weixin.qq.com/s/7at6y2NcYaxGGN8syxlccA 谢谢作者的付出.
- GitHub上7000+ Star的Python常用代码合集
作者 | 二胖并不胖 来源 | 大数据前沿(ID:bigdataqianyan) 今天二胖给大家介绍一个由一个国外小哥用好几年时间维护的Python代码合集.简单来说就是,这个程序员小哥在几年前开始保 ...
- 收藏！PyTorch常用代码段合集
↑↑↑关注后"星标"Datawhale 每日干货 & 每月组队学习,不错过 Datawhale干货 作者:Jack Stark,来源:极市平台 来源丨https://zhu ...
- PyTorch常用代码段合集
↑ 点击蓝字 关注视学算法 作者丨Jack Stark@知乎 来源丨https://zhuanlan.zhihu.com/p/104019160 极市导读 本文是PyTorch常用代码段合集,涵盖基本 ...
- JavaScript常用代码
在这存一下JavaScript常用代码: 1.封装输出 1 var log = function() { 2 console.log.apply(console, arguments) 3 } 4 5 ...
最新文章
- [译] 在 Facebook 发一张登机牌，你就有可能被盗号了
- oozie捕获标准输出异常capture-output
- Using mongoDB's Profiler analyze the performance of database operations
- 均值极差图控制上下限_SPC之I-MR控制图
- Spark SQL：SQLContext
- [c++][语言语法]函数模板和模板函数 及参数类型的运行时判断
- vue 导入excel插件_Vue框架下实现导入导出Excel、导出PDF
- 耳挂式蓝牙耳机原理_挂耳式蓝牙耳机如何佩戴
- HTML-DOM零碎
- HRESULT:0x80040228 异常解决
- halcon学习笔记——（6）单摄像机标定
- 大学生发明文言文编程语言！李白杜甫棺材板压不住啦！
- 硬盘被计算机限制如果解锁,硬盘被锁怎么办
- Linux下服务的管理
- Schizophrenia Bulletin: 精神分裂症的潜在临床-结构维度
- 《针灸》笔记（倪海厦先生人纪系列针灸篇——综合）
- K线形态识别_双飞乌鸦
- 爱因互动王守崑：未来机器人的服务质量会显著高于人类
- PPT写得好的人，为什么都如此遭人痛恨？
- 计算机lg符号,网上总出现LG的符号，是什么意思