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

几个常用代码在IE8和火狐下的对比

XHTMLHTMLCSSIEMicrosoft 
阅读更多
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"来判断。
分享到：
| window.open()运用
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    2011恭贺新年模板下载

    9. **兼容性**：确保模版在主流浏览器（如Chrome、Firefox、Safari、IE等）上的表现一致，避免出现浏览器兼容性问题。 10. **版权问题**：在使用模版时，一定要注意图像、字体和其他素材的版权，避免侵犯他人权益。...

    素材收集问题

    制作Web页面时，通常需要经历以下几个步骤： 1. **完成图片设计**: 使用图形编辑软件（如Photoshop）创建或编辑图片。 2. **切图**: 将设计好的大图分割成小图或关键元素，以便在Web页面中高效加载。 3. **使用DIV+...

    AspNetPager控件及Demo源码 v7.4.4.zip

    6、兼容IE6.0 及FireFox 1.5 等浏览器 7、丰富而完整的控件文档和示例项目： 控件附带的完整的帮助文档及示例项目能够帮助您快速上手，熟悉AspNetPager控件的使用，您还可以通过给作者留言以及论坛提问等方式解决...

    自动化测试Watir参考手册

    - **灵活性**：Selenium提供了更多平台的支持，包括多种浏览器和操作系统，而Watir最初只支持IE和Firefox。 - **学习曲线**：对于Ruby开发者来说，Watir的学习曲线较为平缓；而对于熟悉Java或C#的开发者，则可能会...

    一个简单但常用的javascript表格样式_鼠标划过行变色 简洁实现

    文档中提及的兼容性测试覆盖了IE6、IE7和Firefox 2浏览器，表明代码可能需要针对这些特定版本进行调整，以便正常运行。这些浏览器目前已经较为陈旧，但考虑到某些场合仍然需要对它们提供支持，这表明了作者对于古旧...

Magicbox
Global site tag (gtag.js) - Google Analytics