Стиль CSS отличается между браузерами

Question

Мне нужна ваша помощь с моим css. Я сделал css/html-гаджет в блогере из моих знаний, и у меня, похоже, есть некоторые проблемы.

Ну, как вы можете видеть в коде, есть фоновое изображение, изображение спереди слева и текст спереди справа с некоторыми ссылками на него. Проблема с передним левым рисунком. В Google Chrome это похоже на строки с текстом, но если я открываю веб-страницу с помощью 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>