2

自分のサイトのバナーを更新しました。説明できない余白があります（左から1番目と左から2番目の間）。余白はHTMLの新しい行ですが、それを保持するフェーダー要素がありません。それは奇妙だ。

jsfiddleを設定しようとしましたが、エラーはありません。

コードは次のとおりです。

<br>
<div class="invisible_box">
    <a class="overlay" onclick="window.open('http://www.s-maof.com/LandingPages/PRO/','PRO','scrollbars=yes, toolbar=no,status=no, width=570,height=650')"></a>
    <object type="application/x-shockwave-flash" data="http://s-maof.com/stuff/bannerPro150x75.swf" width="150" height="75">
        <param name="movie" value="http://s-maof.com/stuff/bannerPro150x75.swf" />
        <param name="quality" value="high" />
        <param name="wmode" value="transparent" />
        <param name="loop" value="false" />
    </object>
</div>

<div class="invisible_box" style="z-index: 7000">
    <a class="overlay" style="cursor:auto;"></a>
    <object type="application/x-shockwave-flash" data="http://s-maof.com/stuff/tachlit-150x150.swf" width="150" height="150">
        <param name="movie" value="http://s-maof.com/stuff/tachlit-150x150.swf" />
        <param name="quality" value="high" />
        <param name="wmode" value="transparent" />
        <param name="loop" value="false" />
   </object>               
</div>

そしてCSS：

.invisible_box {
    height: 75px;
    margin-bottom: 5px;
    position: relative;
    width: 150px;
}
.overlay {
    background: none repeat scroll 0 0 white;
    display: block;
    height: 75px;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 150px;
    z-index: 10000;
}
4

4 に答える 4

5

div の後に3 つの見えないU+200B文字があり、それらが原因である可能性があります。ソースコードはこれを示しています（それらを見ることができるテキストエディタを見てください）：

<div class="invisible_box">
    <a class="overlay" onclick="window.open('http://www.s-maof.com/LandingPages/PRO/','PRO','scrollbars=yes, toolbar=no,status=no, width=570,height=650')"></a>
    <object type="application/x-shockwave-flash" data="http://s-maof.com/stuff/bannerPro150x75.swf" width="150" height="75">
        <param name="movie" value="http://s-maof.com/stuff/bannerPro150x75.swf" />
        <param name="quality" value="high" />
        <param name="wmode" value="transparent" />
        <param name="loop" value="false" />
    </object>
</div>​​​&lt;U+200B><U+200B><U+200B>

Tiby が指摘したように、Chrome コンソールに表示される不正な要素を引き起こしている可能性があります。

于 2012-10-04T16:14:11.903 に答える
3

Google Chrome コンソールでその領域を見ると、最初のバナーと 2 番目のバナーの間に大きな空のテキスト ブロックがあります (引用符の間に表示されます)。それを削除したところ、2 つのバナーの間の空白が消えました。やってみて。

于 2012-10-04T16:09:31.203 に答える
2

そこにhtmlコメントを挿入してみてください<!-- --> 

<div class="invisible_box">
            <a class="overlay" onclick="window.open('http://www.s-maof.com/LandingPages/PRO/','PRO','scrollbars=yes, toolbar=no,status=no, width=570,height=650')"></a>
            <object type="application/x-shockwave-flash" data="http://s-maof.com/stuff/bannerPro150x75.swf" width="150" height="75">
                <param name="movie" value="http://s-maof.com/stuff/bannerPro150x75.swf" />
                <param name="quality" value="high" />
                <param name="wmode" value="transparent" />
                <param name="loop" value="false" />
            </object>
        </div><!--

                --><div class="invisible_box" style="z-index: 7000">
<a class="overlay" style="cursor:auto;"></a>
    <object type="application/x-shockwave-flash" data="http://s-maof.com/stuff/tachlit-150x150.swf" width="150" height="150">
        <param name="movie" value="http://s-maof.com/stuff/tachlit-150x150.swf" />
        <param name="quality" value="high" />
        <param name="wmode" value="transparent" />
        <param name="loop" value="false" />
   </object>      

</div>
于 2012-10-04T16:16:19.677 に答える
0

皆さん、@Mr_Green に感謝します。

コードをメモ帳にコピーしたときにのみ発見された3つの文字が隠されていました!! vbulletin エディター (私のサイトのフレームワーク) には表示されませんでした。

とても興味深い..

于 2012-10-04T16:35:24.353 に答える