html - 样式 CSS 因浏览器而异

Question

我的 CSS 需要你的帮助。我根据自己的知识在 blogger 中制作了一个 css/html 小工具，我似乎遇到了一些问题。

正如您在代码中看到的那样，有一张背景图片，左前方的图片和右前方的文字，上面有一些链接。问题出在左前方的图片上。在谷歌浏览器中，文本行似乎没问题，但如果我用 firefox 打开网页，图片会出现一些像素，结果是它与文本不在同一行，因为它必须是。

这是代码。

    <style>
.boxed {
  border: 0.0em solid ;margin-bottom:3px;margin-top:3px;
background:url(BACKGROUNDIMAGELINK) repeat-x bottom;color:#fff;
}
.boxed:hover{text-decoration:underline;}
.stoiximan {width:120px; height:37px; background:url(IMG LINK) 0 0px;}
.mybet {width:120px; height:37px; background:url(IMG LINK) 0 -37px;}
.championsbet {width:120px; height:37px; background:url(IMG LINK) 0 -74px;}
.novibet {width:120px; height:37px; background:url(IMG LINK) 0 -111px;}
.betsonic {width:120px; height:37px; background:url(IMG LINK) 0 -148px;}
.netbet {width:120px; height:37px; background:url(IMG LINK) 0 -185px;}
.sportingbet {width:120px; height:37px; background:url(IMG LINK) 0 -222px;}
.bet8 {width:120px; height:37px; background:url(IMG LINK) 0 -259px;}
.vistabet {width:120px; height:37px; background:url(IMG LINK) 0 -296px;}
</style><div class="boxed">
<a target="_blank" href="link" rel="nofollow"><div class="stoiximan" style="float:left;margin-right: 1em;" alt="STOIXIMAN"></div>   </a><a target="_blank" href="link" rel="nofollow" style="font-weight:normal;color:#FFf;font-family:open sans;letter-spacing:1px;">STOIXIMAN</a><br /><a target="_blank" href="link" rel="nofollow" style="font-weight:normal;color:white;font-family:Open sans;"   >100% έως 50€ Bonus</a>
</div>

<div class="boxed">
<a target="_blank" href="link" rel="nofollow"><div class="mybet" alt="MYBET" style="float:left;margin-right: 1em;"></div></a><a target="_blank" href="link" rel="nofollow" style="font-weight:normal;color:#FFf;font-family:open sans;letter-spacing:1px;">MYBET</a><br /><a target="_blank" href="link" rel="nofollow" style="font-weight:normal;color:white;font-family:open sans;"   >100% έως 100€ Bonus</a></div>

<div class="boxed">
<a target="_blank" href="link" rel="nofollow"><div class="championsbet" alt="CHAMPIONSBET" style="float:left;margin-right: 1em;"></div></a><a target="_blank" href="link" rel="nofollow" style="font-weight:normal;color:#FFf;font-family:open sans;letter-spacing:1px;">CHAMPIONSBET</a><br /><a target="_blank" href="link" rel="nofollow" style="font-weight:normal;color:white;font-family:open sans;"   >Bonus 200€</a></div>

<div class="boxed">
 <a target="_blank" link" rel="nofollow"><div class="novibet" alt="NOVIBET" style="float:left;margin-right: 1em;"></div></a><a target="_blank" href="link" rel="nofollow" style="font-weight:normal;color:#FFf;font-family:open sans;letter-spacing:1px;">NOVIBET</a><br /><a target="_blank"  href="link" rel="nofollow" style="font-weight:normal;color:white;font-family:open sans;"   >100% έως 150€ Bonus</a>
</div>

<div class="boxed">
    <a target="_blank" href="link" rel="nofollow"><div class="betsonic" alt="BETSONIC" style="float:left;margin-right: 1em;"></div></a><a target="_blank" href="link" rel="nofollow" style="font-weight:normal;color:#FFf;font-family:open sans;letter-spacing:1px;">BETSONIC</a><br /><a target="_blank"  href="link" rel="nofollow" style="font-weight:normal;color:white;font-family:open sans;"   >100% έως 50€ Bonus</a>
</div>

<div class="boxed">
    <a target="_blank" href="link" rel="nofollow"><div class="netbet" alt="NETBET" style="float:left;margin-right: 1em;"></div></a><a target="_blank" href="link" style="font-weight:normal;color:#FFf;font-family:open sans;letter-spacing:1px;">NETBET</a><br /><a target="_blank"  href="link" rel="nofollow" style="font-weight:normal;color:white;font-family:open sans;"   >100% έως 100€ Bonus</a>
</div>

<div class="boxed">
    <a target="_blank" href="link" rel="nofollow"><div class="sportingbet" alt="SPORTINGBET" style="float:left;margin-right: 1em;"></div></a><a target="_blank" href="link" rel="nofollow" style="font-weight:normal;color:#FFf;font-family:open sans;letter-spacing:1px;">SPORTINGBET</a><br /><a target="_blank"  href="link" rel="nofollow" style="font-weight:normal;color:white;font-family:open sans;"   >100% έως 100€ Bonus</a>
</div>

<div class="boxed">
    <a target="_blank" href="link" rel="nofollow"><div class="bet8" alt="BET8" style="float:left;margin-right: 1em;"></div></a><a target="_blank" href="link" rel="nofollow" style="font-weight:normal;color:#FFf;font-family:open sans;letter-spacing:1px;">BET8</a><br /><a target="_blank"  href="link" rel="nofollow" style="font-weight:normal;color:white;font-family:open sans;"   >50% Bonus έως 100€</a>
</div>

<div class="boxed">
    <a target="_blank" href="link" rel="nofollow"><div class="vistabet" alt="VISTABET" style="float:left;margin-right: 1em;"></div></a><a target="_blank" href="link" rel="nofollow" style="font-weight:normal;color:#FFf;font-family:open sans;letter-spacing:1px;">VISTABET</a><br /><a target="_blank"  href="link" rel="nofollow" style="font-weight:normal;color:white;font-family:open sans;"   >100% Bonus έως 100€</a>
</div>

这是 js fiddle http://jsfiddle.net/fn4pgvjL/明白我的意思...

在此先感谢您的帮助

Answer 1

有两件事可以解决我猜想的问题。首先，在 .boxed 上设置 overflow 以强制它包含其子元素:

.boxed {overflow: hidden; /* or 'auto' */ }

然后，减小字体大小，这样 Firefox 就不会让它太大，这会压低框并在图像下方创建一个间隙:

.boxed {font-size: 14px; /* largest that seemed to work in Firefox */ }

Demo

在新的或现有的嵌入 style 标签中执行此操作，不在元素上使用内联样式:

<style>
.boxed {
    overflow: hidden;
    font-size: 14px;
}
</style>

---

为了使您的代码更简洁，请在适用于页面中所有元素的相同 style 标记中使用样式，如下所示:

<style>
.boxed {
    overflow: hidden;
    font-size: 14px;
}
.boxed a {
    font-weight: normal;
    color: white;
    font-family: "open sans", arial, sans-serif;
}
.boxed a div {
    float: left;
    margin-right: 1em;
}
</style>