В настоящее время у меня есть 4 Div, каждый из которых содержит гиперссылку. Каждая гиперссылка является членом панели навигации в верхней части сайта. Самая правая ссылка должна соответствовать элементам под ней. Я должен быть в состоянии взять линейку вертикальной линии и увидеть, что крайние правые элементы выровнены по правому краю страницы.
Мой визуализированный HTML отлично выглядит в Chrome, но не в FireFox или IE: ссылки не такие широкие, а страница выглядит странно, потому что четвертая ссылка не попадает в правый край страницы.
Я считаю, что это связано с определениями ширины шрифта, однако я не знаю, что нужно устанавливать вручную.
FireFox 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
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;
--- Append ---
<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;
}