IE 7 изменяет высоту блочного элемента при использовании css border - PullRequest
Новая
       13

IE 7 изменяет высоту блочного элемента при использовании css border

0 голосов
/ 09 ноября 2011 
<div class="navi-buttons">
                <div class="box"> <a href="#" id="c1f" class="simple">1</a></div>
                <div class="box"><a href="#" id="c2f" class="simple">2</a></div>
                <div class="box"> <a href="#" id="c3f" class="simple">3</a></div>
                <div class="box"> <a href="#" id="c4f" class="simple">4</a></div>
                <div class="box"> <a href="#" id="c5f" class="simple">5</a></div>
                <div class="box-hover"><a href="#" id="c6f" class="hover">6</a></div>
            </div>

 .navi-buttons
{
margin-top:8px;
height:auto;
}

.navi-buttons .box{ background-color: #FF9900; display:block; padding:4px;margin-right:2px;float:left;width:10; height:13px;}
.navi-buttons .box-hover{ border: thin solid #FF9900; display:block; padding:3px;margin-right:2px;   float:left;width:10; height:13px;}
.navi-buttons .hover
{

padding: 3px;
color: #FF9900;

}
.navi-buttons .simple
{
background-color: #FF9900;
padding: 3px;
color: #FFFFFF;
}

.navi-buttons a:hover
 {

text-decoration: underline;
}

Итог: enter image description here

Если вы видите изображение ниже в IE 7, выбранная кнопка в этом случае 4 изменения высоты, в других браузерах она работает нормально, я включил разметку и CSS, Может ли кто-нибудь помочь с этим, где я его получаю неправильно.

Thnx

1 Ответ

1 голос
/ 09 ноября 2011

может быть, вы должны написать 1px вместо thin.Как это: 

.navi-buttons .box-hover {
    border: 1px solid #FF9900; 
    display:block; 
    padding:3px;
    margin-right:2px;   
    float:left;
    width:10; 
    height:13px;
}
...