Проблемы с HTML-границей с плавающей точкой при уменьшении

Question

У меня есть контейнер div, ширина которого составляет 800 пикселей, который разделен на две части одной границей (1 пиксель). div A (399px) плавает влево, в то время как div B (400px) плавает вправо. Проблема в том, что когда я уменьшаю масштаб, правая граница, которая является div B, перемещается туда, где она размещается внизу страницы. Чтобы исправить это, я установил ширину двух div в процентах по 50% каждый - я удалил границу. Теперь, когда я добавляю границу в центре (устанавливая рамку-правую часть div A), а также настраивая div A на 49.8%, он снова помещает div B внизу при уменьшении. Я делаю что-то неправильно? Проблема в том, что граница установлена ​​в 1px, я думаю. Как это исправить? Мне нужен размер границы в 1 пиксель.

Answer 1

Эта проблема возникает из-за того, что браузер пропорционально уменьшает размер div, но не применяет сокращение к границе.

Чтобы решить эту проблему, попробуйте использовать эту CSS:

 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -ms-box-sizing: border-box;
 -webkit-box-sizing: border-box;

Размер div будет измерен с рамкой и уменьшен должным образом при уменьшении, и вы можете оставить оба div с шириной 400px.

Полный код должен выглядеть примерно так:

div#container{
    width: 800px;
}
div#container > div{
    width: 400px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

div#left{
    float: left;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: black;
}
div#right{
    float: right;

}

Answer 2

Вы можете сделать это следующим образом: http://jsfiddle.net/SNZEK/

Если вы поместите один div в другой div и добавите размер границы к родительскому div.Это должно работать в FF, Chrome и> = IE7

.parent-div { 
    float: left;
    width: 50px;
}
.child-div {  
    width: 48px;
    border: 1px solid black;
}

Answer 3

Попробуйте следующее css, посмотрите, решит ли это вашу проблему.Я попробовал это на IE8 и Chrome, и они оба работают нормально.Я настроил мой тестовый пример на jsfiddle .

div#container{
    width: 800px;
}
div#left{
    float: left;
    width: 398px;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: black;
}
div#right{
    float: right;
    width: 400px;
}