IE6的兼容性问题

Question

下载了一个JQuery登陆框的插件，但是在IE6下不兼容（直接用作者提供的demo也不行）下面是我做的网站
在firefox，IE8，IE9下测试效果图，正常情况下整个页面背景变暗，在页面居中显示登录div
IE6下测试效果图，页面背景没有变暗，而且DIV显示在了页面底部靠左侧（隐藏时的DIV是在页面底部居中放置的）
主要有关的CSS代码如下 #signup {     width: 470px;
     padding-bottom: 2px;    display:none;
    background: #FFF;
    border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
    box-shadow: 0px 0px 4px rgba(0,0,0,0.7); -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.7); -moz-box-shadow: 0 0px 4px rgba(0,0,0,0.7);
       
}
jQyery代码如下(function($){
  $.fn.extend({leanModal:function(_1){
var _2={top:100,overlay:0.5};
_1=$.extend(_2,_1);
return this.each(function(){
var o=_1;$(this).click(function(e){
var _3=$("<div id='lean_overlay'></div>");
var _4=$(this).attr("href");
$("body").append(_3);
$("#lean_overlay").click(function(){_5(_4);});
var _6=$(_4).outerHeight();
var _7=$(_4).outerWidth();$("#lean_overlay").css({"display":"block",opacity:0});
$("#lean_overlay").fadeTo(200,o.overlay);
$(_4).css({"display":"block","position":"fixed",opacity:0,"z-index":11000,"left":50+"%","margin-left":-(_7/2)+"px","top":o.top+"px"});
$(_4).fadeTo(200,1);e.preventDefault();});});function _5(_8){$("#lean_overlay").fadeOut(200);$(_8).css({"display":"none"});};}});})(jQuery);
我把JQuery代码里涉及div显示样式的部分加上"_left":"50%"后仍然不起作用。是样式不兼容还是脚本不兼容呢？
为什么好看的效果在IE6下好多都不能用

Answer 1

是啊。。头疼的IE6。。难到因为一个IE6就要放弃这么多好看的效果吗。。

Answer 2

"display":"block","position":"fixed",opacity:0,"z-index":11000,"left":50+"%","margin-left":
IE6不支持fixed属性，你需要判断下是不是IE6，是的话设置为absolute$(_4).css({"display":"block","position":/msie 6/i.test(navigator.userAgent)?"absolute":"fixed",opacity:0,"z-index":11000,"left":50+"%","margin-left":-(_7/2)+"px","top":o.top+"px"});

Answer 3

对不起昨天出去玩回复晚了。
谢谢showbo前辈，问题已经解决一半了。还有IE6下点击登录系统后背景色不会变暗，能不能解决呢？
其他浏览器都是点击除了登录界面之外的地方就会自动隐藏div，但是IE6下没有效果，div不会隐藏，这个又怎么解决呀。

Answer 4

背景lean_overlay的样式贴出来，css有问题吧

Answer 5

这应该是事件处理的时候哪里出了问题吧。没看到你具体的代码，只能靠猜的了。找找类似于
document.onclick
或者
$(window).click(function(){})//如果看到这个，就把window改成document
或者
$(document).click(function(){})

Answer 6

#lean_overlay {
    position: fixed;
    z-index: 10000;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}
我把fixed换成/msie 6/i.test(navigator.userAgent)?"absolute":"fixed"在所有浏览器下都不管用了
可能只有在jQuery下才能这么用吧。。

Answer 7

这个肯定不行了，css又不支持脚本【ie除外，有expression】这个插件也有bug，基本上按照w3c标准来写的，没有加兼容IE的判断，按照backcompat渲染的时候IE7,Ie8也不支持fixed，IE9没有，不知道是否直接支持fixed了。大概修改了下
   (function ($) {
       $.fn.extend({ leanModal: function (_1) {
           var _2 = { top: 100, overlay: 0.5 }
            , css1 = document.compatMode == 'CSS1Compat'
            , ie6 = /msie 6/i.test(navigator.userAgent) || (!!document.all && !css1)//IE7+文档说明不是xhtml的也不支持fixed属性，只能按照ie6的方法来处理
            ;
           _1 = $.extend(_2, _1);
           return this.each(function () {
               var o = _1; $(this).click(function (e) {
                   var _3 = $('#lean_overlay');
                   if (_3.size() == 0) {//修正点击多次重复添加背景
                       _3 = $("<div id='lean_overlay'></div>");
                       $("body").append(_3);
                       _3.click(function () { _5(_4); });
                   }
                   var _4 = $(this).attr("href");
                   var _6 = $(_4).outerHeight();
                   var _7 = $(_4).outerWidth();
                   _3.css({ "display": "block", opacity: 0 });
                   _3.fadeTo(200, o.overlay);
                   if (ie6) { //IE6设置width 100%，height：100%在CSS1Compat下好像么有用，直接设置为根节点的滚动高和宽得了
                       _3.css({ position: 'absolute', height: document[css1 ? 'documentElement' : 'body'].scrollHeight, width: document[css1 ? 'documentElement' : 'body'].scrollWidth });
                       //修正IE6滚动问题
                       $(window).scroll(function () { $(_4).css({ top: document[css1 ? 'documentElement' : 'body'].scrollTop + o.top }); });
                   }
                   $(_4).css({ "display": "block", "position": ie6 ? 'absolute' : "fixed", opacity: 100, "z-index": 11000, "left": 50 + "%", "margin-left": -(_7 / 2) + "px", "top": o.top + "px" });
                   $(_4).fadeTo(200, 1); e.preventDefault();
               });
           });           function _5(_8) { $("#lean_overlay").fadeOut(200); $(_8).css({ "display": "none" }); };
       }       });
   })(jQuery);

Answer 8

您好大神，我按新的脚本运行的时候，IE6下一点“登录”整个屏幕都黑了。IE7下是整个屏幕（包括登录div）都变暗了。IE8，IE9和火狐都是正常的。CSS样式表不需要修改吗？

Answer 9

没改样式，我这里测试都可以的。有个问题是ie6可能是navigator.userAgent并不一定输出就是msie 6.0这种，可能会是msie 7。你alert看下navigator.userAgent是不是包含msie 6测试代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style>
#lean_overlay { position: fixed; z-index: 10000; top: 0px; left: 0px; height:100%; width:100%; background: #000; display: none; } 
</style>
    <script type="text/javascript" src="http://www.lvzhou168.com/js/jquery.js"></script>
    <script>
       (function ($) {
           $.fn.extend({ leanModal: function (_1) {
               var _2 = { top: 100, overlay: 0.5 }
            , css1 = document.compatMode == 'CSS1Compat'
            , ie6 = /msie 6/i.test(navigator.userAgent) || (!!document.all && !css1)//IE7+文档说明不是xhtml的也不支持fixed属性，只能按照ie6的方法来处理
            ;
               _1 = $.extend(_2, _1);
               return this.each(function () {
                   var o = _1; $(this).click(function (e) {
                       var _3 = $('#lean_overlay');
                       if (_3.size() == 0) {//修正点击多次重复添加背景
                           _3 = $("<div id='lean_overlay'></div>");
                           $("body").append(_3);
                           _3.click(function () { _5(_4); });
                       }
                       var _4 = $(this).attr("href");
                       var _6 = $(_4).outerHeight();
                       var _7 = $(_4).outerWidth();
                       _3.css({ "display": "block", opacity: 0 });
                       _3.fadeTo(200, o.overlay);
                       if (ie6) { //IE6设置width 100%，height：100%在CSS1Compat下好像么有用，直接设置为根节点的滚动高和宽得了
                           _3.css({ position: 'absolute', height: document[css1 ? 'documentElement' : 'body'].scrollHeight, width: document[css1 ? 'documentElement' : 'body'].scrollWidth });
                           //修正IE6滚动问题
                           $(window).scroll(function () { $(_4).css({ top: document[css1 ? 'documentElement' : 'body'].scrollTop + o.top }); });
                       }
                       $(_4).css({ "display": "block", "position": ie6 ? 'absolute' : "fixed", opacity: 100, "z-index": 11000, "left": 50 + "%", "margin-left": -(_7 / 2) + "px", "top": o.top + "px" });
                       $(_4).fadeTo(200, 1); e.preventDefault();
                   });
               });               function _5(_8) { $("#lean_overlay").fadeOut(200); $(_8).css({ "display": "none" }); };
           }           });
       })(jQuery);       $(function () {
           $('input[href]').leanModal();
       });
</script>
<input type="button" href="#abc" value="打开登陆框"/>
<div style="height:1000px;"></div>
<div style="width:300px;height:200px;border:solid 1px black;display:none;background:#fff" id="abc">登陆框</div>

Answer 10

大神，是不是还和系统有关系啊
我在单位用的是WIN7系统，用您的测试例子结果就显示不正常，IE6黑屏
但是在家用的是XP系统，用您的例子显示是正常的。。

Answer 11

我用的是IETester测试的，alert navigator.userAgent输出就是msie 6.0

Answer 12

黑屏可能是ie浏览器安全设置的问题，没有启用“2进制和脚本行为”，这样滤镜没有效果的IETest只是一个工具，并没完全实现了真正的IE6的功能，有些脚本在ietest报错，但是在实际的ie6中是可以运行的。所以测试的时候找ie6来测试