스타일 CSS는 브라우저마다 다릅니다

Question

내 CSS에 도움이 필요합니다. 나는 내 지식의 블로거에서 CSS/HTML - 가젯을 만들었고 나는 약간의 문제가있는 것 같다.

코드에서 볼 수 있듯이 배경 그림, 왼쪽 앞면의 그림 및 앞면의 일부 텍스트가 오른쪽에있는 텍스트입니다. 문제는 왼쪽 앞의 그림입니다. Google 크롬에서는 텍스트가있는 줄에는 괜찮은 것처럼 보이지만 파이어 폭스로 웹 페이지를 열면 그림이 약간의 픽셀을 가져오고 그 결과 텍스트와 같은 줄에 있지 않습니다.

다음은 코드입니다. 여기

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

는 사전에 어떤 도움 ... 내가 무슨 뜻인지 제가 같은데요하면 문제가 해결됩니다

Answer 1

두 가지를

감사를 볼 수있는 JS 바이올린 http://jsfiddle.net/fn4pgvjL/입니다. 상자를 아래로 밀어있는 파이어 폭스가 너무 크게하지 않도록, 그리고

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

글꼴 크기를 줄이고 이미지에서 격차를 만듭니다 첫째, 자식 요소를 포함하도록 강제로 .boxed에 오버 플로우를 설정 :

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