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中的滾動條

回答

相關問題