0

今日、私は自分の Joomla Web サイトを古いブラウザー IE6 で閲覧しようとしました。

すべての要素は問題ないように見えましたが、SqueezeBox (Joomla モーダル ボックス) が有効になっているページに長い水平スクロール バーが表示されました。

<body>問題を見つけるために、テンプレートを編集し、タグの横にあるすべてのコードを削除しました。もう一度試してみると、閉じるボタンと長いスクロールバーのある空白のページが表示されました。(スクリーンショット)

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

どうしたの？

4

2 に答える 2

1

クライアントがまだ IE6 を使用している場合、壊れているように見える Web サイトに慣れているはずです。このスクロールバーはどれくらい悪いですか? 使い勝手に影響はありますか？ユーザーがまだサイトを使用できる場合は、少なくともブラウザーをアップグレードするまでは、サイトと一緒に暮らすように伝えることをお勧めします.

彼らが本当にアップグレードできず、問題を解決することを主張する場合は、 を使用overflow:hiddenしてスクロールバーが表示されないようにすることができます。

ただし、サイトの IE6 には他の問題がある可能性があることに注意してください。実際、ほぼ確実に存在します。ユーザーが自分のためだけにサイトを修正することを主張し続ける場合、1 人のユーザーのためだけにかなりの作業を行っていることに気付くかもしれません。この顧客があなたにとってどれほどの価値があるか、また、顧客をサポートするためにどれだけの時間を費やしても構わないと思っているかを、ここで自問する必要があります。

于 2013-02-10T11:42:22.730 に答える
0

CSSコードで、これを試してください：

#sbox-overlay {
    position: absolute;
    background-color: #000;
    left: 0px;
    top: 0px;
    right:0;
    bottom:0;
    overflow-x:hidden;
    overflow-y:auto;
}
于 2013-02-11T09:55:32.723 に答える