gpt4 book ai didi

css - IE6 中的滚动条

转载 作者:太空宇宙 更新时间:2023-11-04 15:18:55 24 4
gpt4 key购买 nike

今天,我尝试在一个古老的浏览器 IE6 中浏览我的 Joomla 网站。

所有元素看起来都不错,但我在启用了 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 样式表):

/**
* 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;
}
}

怎么了?

最佳答案

如果您的客户仍在使用 IE6,他们肯定已经习惯于看到看起来破烂的网站?这个滚动条到底有多糟糕?它会影响可用性吗?如果用户仍然可以使用该网站,我建议告诉他们接受它,至少在他们升级浏览器之前。

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

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

关于css - IE6 中的滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14797103/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com