3 개의 주요 브라우저에서 글꼴 너비 맞추기

Question

저는 현재 4 개의 Div가 있으며 각각은 하이퍼 링크를 포함하고 있습니다. 각 하이퍼 링크는 웹 사이트의 상단에있는 탐색 모음의 구성원입니다. 가장 오른쪽의 링크는 그 아래의 요소와 일렬로 있어야합니다. 수직선 눈금자를 사용하고 가장 오른쪽 요소가 페이지의 맨 오른쪽 가장자리에 정렬되어 있어야합니다.

내 렌더링 된 HTML은 FireFox 또는 IE에서 잘 보이지 않습니다. 네 번째 링크가 페이지의 오른쪽 가장자리에 맞지 않기 때문에 링크가 너무 넓고 페이지가 이상하게 보입니다.

저는 이것이 글꼴 너비 정의와 관련이 있다고 생각하지만 수동으로 무엇을 설정할 지 모르겠습니다.

파이어 폭스 CSS 계산 된 텍스트 :

font-family Lucida Sans Unicode 
    font-size 16px 
    font-weight 600 
    font-style normal 
    font-size-adjust none 
    color #EEFFFF 
    text-transform none 
    text-decoration none 
    letter-spacing normal 
    word-spacing 0 
    line-height 23px 
    text-align start 
    vertical-align baseline 
    direction ltr 
    -moz-tab-size 8 
    -moz-font-feature-settings normal 
    -moz-font-language-override normal 
    -moz-text-blink none 
    -moz-text-decoration-color #EEFFFF 
    -moz-text-decoration-line none 
    -moz-text-decoration-style solid 
    text-overflow clip 

크롬 계산 된 스타일 :

background-attachment: scroll; 
background-clip: border-box; 
background-color: #D00; 
background-image: none; 
background-origin: padding-box; 
border-bottom-color: #B00; 
border-bottom-style: solid; 
border-bottom-width: 1px; 
border-left-color: #B00; 
border-left-style: solid; 
border-left-width: 1px; 
border-right-color: #B00; 
border-right-style: solid; 
border-right-width: 1px; 
border-top-color: #B00; 
border-top-style: solid; 
border-top-width: 1px; 
color: white; 
cursor: auto; 
display: inline; 
float: none; 
font-family: 'Lucida Sans Unicode'; 
font-size: 16px; 
font-weight: 600; 
height: auto; 
line-height: 23px; 
margin-bottom: 0px; 
margin-left: 0px; 
margin-right: 0px; 
margin-top: 0px; 
padding-bottom: 17px; 
padding-left: 10px; 
padding-right: 10px; 
padding-top: 17px; 
text-decoration: none; 
width: auto; 

--- 추가]은 ---

<div id="LinkContainer"> 
    <div class="Link"> 
     <a href="a.html" class="mnu-hover">Variable Length Text A</a> 
    </div> 
    <div class="Link"> 
     <a href="b.html" class="mnu-hover">Variable B</a> 
    </div> 
    <div class="Link"> 
     <a href="c.html" class="mnu-hover">Variable Length Text C Really Long</a> 
    </div> 
    <div class="Link"> 
     <a href="d.html" class="mnu-hover">Var D</a> 
    </div> 
</div> 


#LinkContainer 
{ 
    position:absolute; 
    float: left; 
    margin-top:165px; 
    margin-bottom:5px; 

    margin-left:225px; 

    width:680px; 


} 

.Link 
{ 
    float:left; 
    margin: 0px 1px 0px 1px; 
    padding: 00px 0px 20px 0px; 
    color: #EFF; 
    font-weight:600; 
    font-family:Lucida Sans Unicode; 
    font-size: 16px; 

} 

.mnu-hover 
{ 
    background: #C00; 
    text-decoration: none; /* color: #FFF; */; 
    border: solid 1px #B00; 
    padding: 15px 10px 15px 10px; 
    margin: 0 0 0 0; 
    color: #EEE; 
} 

.mnu-hover:hover 
{ 
    background: #D00; 
    border: solid 1px #B00; 
    padding: 17px 10px 17px 10px; 
    color: #FFF; 
} 

Answer 1

이 당신이 할 수있는 일이 아니다 고치다. 텍스트가 모든 OS의 모든 브라우저에서 완벽하게 보이게하려면 이미지를 사용하십시오.

<ul id="LinkContainer"> 
    <li class="=Link"> 
     <a href="a.html" class="var_a mnu-hover">Variable Length Text A</a> 
    </li> 
    <li class="=Link"> 
     <a href="b.html" class="var_b mnu-hover">Variable B</a> 
    </li> 
    <li class="=Link"> 
     <a href="c.html" class="var_c mnu-hover">Variable Length Text C Really Long</a> 
    </li> 
    <li class="=Link"> 
     <a href="d.html" class="var_d mnu-hover">Var D</a> 
    </li> 
</ul> 


.Link a { 
    background-image:url(title_sprite.png); 
    background-repeat:no-repeat; 
    height:40px; 
    text-indent:-999em; 
} 
.Link a.var_a { 
    background-repeat:no-repeat; 
    background-position:0 0; 
    width:200px; 
} 
.Link a.var_b { 
    background-repeat:no-repeat; 
    background-position:0 -45px; 
    width:150px; 
} 
.Link a.var_c { 
    background-repeat:no-repeat; 
    background-position:0 -90px; 
    width:75px; 
} 
.Link a.var_d { 
    background-repeat:no-repeat; 
    background-position:0 -135px; 
    width:90px; 
}