Question

我目前有4个Div，每个Div都包含一个超链接。每个超链接都是网站顶部导航栏的成员。最右边的链接必须与其下方的元素对齐。我应该能够使用垂直线标尺并看到最右边的元素在页面的最右边对齐。

我呈现的HTML在Chrome中看起来很棒，但在FireFox或IE中看起来不是很好：链接不够宽，页面看起来很奇怪，因为第四个链接没有点击页面的右边缘。

我认为这与字体宽度定义有关，但我不知道手动设置的内容。

FireFox CSS Computed Text：

 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

Chrome Computed Style：

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

这不是你可以解决的问题。如果文本必须在每个操作系统的每个浏览器中看起来都很完美，请使用图像。

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

在3个主要浏览器中对齐字体宽度

1 个答案: