對齊3個主要瀏覽器的字體寬度

我目前有4個Div，每個Div都包含一個超鏈接。每個超鏈接都是網站頂部導航欄的成員。最右邊的鏈接必須與它下面的元素對齊。我應該可以使用垂直線標尺並在頁面的最右邊看到最右邊的元素。對齊3個主要瀏覽器的字體寬度

我在Chrome中看起來很棒，但在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; 
}

來源

2012-03-28 sammarcow

font-weight：600沒有得到普遍支持。你通常會變得粗體或不粗體。 – 2012-03-28 20:59:12

你能發佈相關的html嗎？您是否將文本對齊？ – Jrod 2012-03-28 20:59:46

這可能是DirectWrite和GDI的區別。這不是你可以改變的。更多信息：http：//stackoverflow.com/questions/7360665/font-size-different-in-webkit-and-moz-browsers/7360787#7360787 – thirtydot 2012-03-28 21:11:15

這是不是你可以固定。如果文本在每個操作系統的每個瀏覽器中看起來都很完美，請使用圖像。

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

來源

2012-03-29 01:39:15

對齊3個主要瀏覽器的字體寬度

回答

相關問題