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 后面有三个不可见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 控制台中，如果您查看该区域，则在第一个横幅和第二个横幅之间有一个大的空白文本块（它出现在引号之间）。我刚刚删除了它，两个横幅之间的空白就消失了。试试看。

于 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，

隐藏了三个字符，是我复制代码到记事本才发现的！！vbulletin 编辑器（我的网站框架）中没有显示。

很有意思..

于 2012-10-04T16:35:24.353 回答