Question

我的css需要你的帮助。我根据自己的知识在博客中制作了一个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小提琴http://jsfiddle.net/fn4pgvjL/，看看我的意思......

提前感谢您提供任何帮助

Answer 1

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

.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>

样式CSS在浏览器之间是不同的

1 个答案: