`
qepipnu
  • 浏览: 74602 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

几个常用代码在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"来判断。
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics