IE6中的滚动条

今天，我试着在古老的浏览器IE6中浏览我的Joomla网站。IE6中的滚动条

所有的元素看起来不错，但我看到一个长的水平滚动条在页面上启用了SqueezeBox（Joomla模式框）。

要找到问题，我编辑了模板并删除<body>标记旁边的所有代码。再次尝试，我看到空白页面，一个关闭按钮和一个长滚动条。（screenshot）

<body>内容：

<div tabindex="-1" style="z-index: 65555; opacity: 0;" aria-hidden="true" id="sbox-overlay"></div> 
<div class="shadow" style="z-index: 65557;" aria-hidden="true" role="dialog" id="sbox-window"> 
    <div style="opacity: 0;" id="sbox-content"></div> 
    <a aria-controls="sbox-window" role="button" href="#" id="sbox-btn-close"></a> 
</div>

<body>风格：

color: #000000; 
height: 100%; 
margin: 0; 
padding: 0; 
text-align: center;

modal.css（深蓝样式表）：

/** 
* SqueezeBox - Expandable Lightbox 
* 
* Allows to open various content as modal, 
* centered and animated box. 
* 
* @version  1.3 
* 
* @license  MIT-style license 
* @author  Harald Kirschner <mail [at] digitarald.de> 
* @author  Rouven Weßling <me [at] rouvenwessling.de> 
* @copyright Author 
*/ 

#sbox-overlay { 
    position: absolute; 
    background-color: #000; 
    left: 0px; 
    top: 0px; 
} 

#sbox-window { 
    position: absolute; 
    background-color: #fff; 
    text-align: left; 
    overflow: visible; 
    padding: 10px; 
    /* invalid values, but looks smoother! */ 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; 
} 

#sbox-window[aria-hidden=true], 
#sbox-overlay[aria-hidden=true] { 
    display: none; 
} 

#sbox-btn-close { 
    position: absolute; 
    width: 30px; 
    height: 30px; 
    right: -15px; 
    top: -15px; 
    background: url(../images/modal/closebox.png) no-repeat center; 
    border: none; 
} 

.sbox-loading #sbox-content { 
    background-image: url(../images/modal/spinner.gif); 
    background-repeat: no-repeat; 
    background-position: center; 
} 

#sbox-content { 
    clear: both; 
    overflow: auto; 
    background-color: #fff; 
    height: 100%; 
    width: 100%; 
} 

.sbox-content-image#sbox-content { 
    overflow: visible; 
} 

#sbox-image { 
    display: block; 
} 

.sbox-content-image img { 
    display: block; 
    width: 100%; 
    height: 100%; 
} 

.sbox-content-iframe#sbox-content { 
    overflow: visible; 
} 

/* Hides scrollbars */ 
.body-overlayed { 
    overflow: hidden; 
} 

/* Hides flash (Firefox problem) and selects (IE) */ 
.body-overlayed embed, .body-overlayed object, .body-overlayed select { 
    visibility: hidden; 
} 

#sbox-window embed, #sbox-window object, #sbox-window select { 
    visibility: visible; 
} 

/* Shadows */ 
#sbox-window.shadow { 
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.7); 
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.7); 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.7); 
} 

.sbox-bg { 
    position: absolute; 
    width: 33px; 
    height: 40px; 
} 

.sbox-bg-n { 
    left: 0; 
    top: -40px; 
    width: 100%; 
    background: url(../images/modal/bg_n.png) repeat-x; 
} 
.sbox-bg-ne { 
    right: -33px; 
    top: -40px; 
    background: url(../images/modal/bg_ne.png) no-repeat; 
} 
.sbox-bg-e { 
    right: -33px; 
    top: 0; 
    height: 100%; 
    background: url(../images/modal/bg_e.png) repeat-y; 
} 
.sbox-bg-se { 
    right: -33px; 
    bottom: -40px; 
    background: url(../images/modal/bg_se.png) no-repeat; 
} 
.sbox-bg-s { 
    left: 0; 
    bottom: -40px; 
    width: 100%; 
    background: url(../images/modal/bg_s.png) repeat-x; 
} 
.sbox-bg-sw { 
    left: -33px; 
    bottom: -40px; 
    background: url(../images/modal/bg_sw.png) no-repeat; 
} 
.sbox-bg-w { 
    left: -33px; 
    top: 0; 
    height: 100%; 
    background: url(../images/modal/bg_w.png) repeat-y; 
} 
.sbox-bg-nw { 
    left: -33px; 
    top: -40px; 
    background: url(../images/modal/bg_nw.png) no-repeat; 
} 
@-moz-document url-prefix() { 
    .body-overlayed { 
    overflow: visible; 
    } 
}

有什么不对？

来源

2013-02-10 mrdaliri

什么是错的是IE6 :) – 2013-02-10 11:19:47

@XLAnt：：（（（（......这是我的一个客户... – mrdaliri 2013-02-10 11:21:37

@kikio随着这样的客户可能更好地将网页呈现为图片或PDF格式，当他们被IE6访问时。关于唯一的方法你保持你的理智和你的客户。 – Perleone 2013-02-10 11:27:58

如果你的客户端仍然在使用IE6，那么他们肯定会被用来查看看起来破损的网站吗？这个滚动条有多糟？它会影响可用性吗？如果用户仍然可以使用该网站，我建议告诉他们与之共处，至少在他们升级浏览器之前。

如果他们确实无法升级并坚持要求您解决问题，您可以尝试使用overflow:hidden以防止滚动条出现。

但请注意，您的网站上可能存在IE6的其他问题。事实上，几乎可以肯定的是。如果用户一直坚持让你为他们修理网站，那么你可能会发现自己只为一个用户做了很多工作。你应该问自己现在这个客户对你有多大的价值，以及你愿意花多少时间来支持他们。

来源

2013-02-10 11:42:22 Spudley

你是对的，但有人雇佣我来解决他在IE6中的问题（现在是我的！），所以我必须解决所有的问题......不仅要隐藏它们， – mrdaliri 2013-02-10 12:01:19

嗯，祝你好运我希望他为你付出代价的工作。我在您提供的CSS代码中看不到任何明显的内容。你将需要某种调试工具，不幸的是IE6没有任何体面的调试工具。我所知道的最好的是IETester或FirebugLite附带的DebugBar工具。这些都不会像你在现代浏览器中获得的那种开发工具一样好，但它们可能会有所帮助。与此同时，只要没有任何重要的东西被隐藏起来，“溢出：隐藏”可能就是这个问题的答案，即使它有点破解。尝试一下。 – Spudley 2013-02-10 12:15:38

在你的CSS代码，试试这个：

#sbox-overlay { 
    position: absolute; 
    background-color: #000; 
    left: 0px; 
    top: 0px; 
    right:0; 
    bottom:0; 
    overflow-x:hidden; 
    overflow-y:auto; 
}

来源

2013-02-11 09:55:32 Arnaud

IE6中的滚动条

回答

相关问题