`
qepipnu
  • 浏览: 76837 次
  • 性别: 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()运用
评论
发表评论

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

相关推荐

    IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例

    尤其是在处理旧版Internet Explorer（如IE6、IE7、IE8）与现代浏览器（如Firefox、Chrome等）之间的样式差异时，CSS Hack技巧成为了必不可少的工具。本文将深入探讨不同浏览器兼容性的CSS Hack代码及其实例，帮助...

    在Firefox下直接调用IE浏览器(IETab这个插件).zip

    标题中的"IETab"是一个Firefox浏览器插件，它允许用户在Firefox中直接使用Internet Explorer（IE）的渲染引擎来打开网页。这个插件对于那些必须访问仅支持IE特性的网站的用户来说非常有用，因为某些老旧或特定的Web...

    ajax初始化代码，ie8和Firefox 3.6测试通过

    ajax初始化代码，ie8和Firefox 3.6测试通过

    兼容firefox火狐、IE6IE7IE8加入收藏，设为首页代码

    针对不同的浏览器，特别是老版本的浏览器如Firefox火狐和Internet Explorer (IE6、IE7、IE8)，需要编写特定的代码来实现特定的功能，例如“加入收藏”和“设为首页”。下面将详细解释如何实现这些功能。 首先，我们...

    JavaScript在IE和Firefox(火狐)的不兼容问题解决

    这表明文章旨在探讨并提供解决方案来处理在不同浏览器环境下的JavaScript兼容性问题，尤其是在Internet Explorer（IE）和Mozilla Firefox（火狐）这两个浏览器上。下面将深入解析文件中的部分代码示例，以及给出的一...

    兼容IE6,IE7,IE8和Firefox的图片上传预览效果

    标题提到的"兼容IE6,IE7,IE8和Firefox的图片上传预览效果"直指浏览器兼容性问题，这是一个在过去很长一段时间内困扰开发者的关键挑战。由于早期的Internet Explorer（IE6, IE7, IE8）对现代Web标准的支持不足，而...

    淘宝SDK模块代码 能兼容ie6ie7ie8以及firefox的css透明滤镜

    这个名为“淘宝SDK模块代码 能兼容ie6ie7ie8以及firefox的css透明滤镜”的资源，旨在解决一个核心问题：如何在不同浏览器间，特别是老旧的Internet Explorer（IE6、IE7、IE8）和Firefox上实现一致的CSS透明效果。...

    针对firefox ie6 ie7 ie8的css样式hack

    在进行Web开发的过程中，我们经常会遇到浏览器兼容性问题，尤其是早期的Internet Explorer（IE）版本如IE6、IE7和IE8与现代浏览器如Firefox之间的差异。为了确保网站能够在不同浏览器下正常显示，开发者需要使用特定...

    javascript在IE和Firefox中兼容性问题

    本篇将主要探讨JavaScript在Internet Explorer (IE) 和Firefox之间的兼容性挑战，并通过给出的文件名列表解析这些测试用例所涉及的知识点。 1. **createDocument测试.html** 在IE和Firefox中，创建XML文档的方法...

    js在IE和fireFox的区别

    ### JavaScript在Internet Explorer (IE) 和 Firefox 中的区别与解决方案 #### 一、获取HTML元素的方式差异 1. **通过ID获取元素**： - **IE**：支持`document.getElementById`和`document.all`两种方式。 - ...

    CSS兼容大全IE5,IE5.5,IE6,IE7,Firefox,Opera,Safari等浏览器

    例如，IE6 能识别下划线_和星号*,IE7 能识别星号*，但不能识别下划线_，而 Firefox 两个都不能认识。我们可以根据这个原理，来写不同的 CSS 代码，针对不同的浏览器。 书写顺序 ------------ 一般是将识别能力强的...

    让IE和火狐同时兼容

    特别是在早期的Web时代，Internet Explorer（简称IE）与Mozilla Firefox（简称火狐）这两款浏览器之间存在着显著的差异，这使得页面设计师不得不花费大量时间去解决它们之间的兼容性问题。本文将详细介绍如何使网站...

    多浏览器下IE6 IE7 firefox li 间距问题

    ### 解决多浏览器下IE6、IE7及Firefox中`&lt;li&gt;`元素间距兼容...通过以上方法，我们可以有效地解决多浏览器下尤其是IE5、IE5.5、IE6、IE7及Firefox中`&lt;li&gt;`元素间距兼容性问题，确保页面在各种浏览器中的一致性和美观性。

    Firefox IE Tab

    - **模拟IE**：Firefox IE Tab扩展的核心功能是模拟Internet Explorer浏览器的渲染引擎，使用户可以在Firefox中看到网页在IE下的显示效果。 - **多版本支持**：该扩展不仅支持最新的IE版本，还可以选择回退到早期...

    IE和firefox调试插件

    调试JavaScript是网页开发中的重要环节，无论是在IE还是Firefox中，这些插件都提供了强大的JS调试功能。你可以设置断点，查看变量值，跟踪调用栈，这极大地提高了调试效率。对于CSS和HTML，开发者可以直接在页面上...

    Javascript的IE和Firefox(火狐)兼容性

    ### Javascript的IE与Firefox(火狐)兼容性解决方案 在Web开发过程中，浏览器兼容性问题一直是开发者们关注的重点之一。由于不同的浏览器对于Web标准的支持程度存在差异，这导致了同样的代码在不同浏览器中的表现...

    省市联动的二级菜单,支持IE8和firefox

    7. **测试与优化**：最后，要在多种浏览器环境下进行测试，确保在IE8和Firefox等老版本浏览器中表现良好，没有样式错乱或功能失效的问题。同时，考虑到性能，可能需要优化代码，减少DOM操作，避免阻塞页面渲染。 ...

    mxGraph破解包含ie和firefox

    然而，由于浏览器之间的兼容性问题，mxGraph在某些老旧版本的Internet Explorer（IE）和Firefox上可能会遇到挑战。"mxGraph破解包含ie和firefox"的描述暗示了我们正在处理如何让mxGraph在这些特定浏览器上正常运行的...

    IE6、_IE7、IE8、Firefox兼容性问题

    在网页开发中，兼容性问题是一个常见且棘手的问题，尤其是涉及到老版本的Internet Explorer（IE6、IE7、IE8）和Firefox等其他浏览器。这些浏览器对于CSS（层叠样式表）的解析方式存在差异，导致在不同浏览器中页面...

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