3px двойная рамка с левой или правой стороны div, однако в хроме она оставляет 1px пробел в верхней части границы. Я пробовал много раз посмотреть, не является ли это ошибкой браузера или каким-то решением.css border-style double 1px gap chrome

Если просмотреть код в Firefox/то есть вы получаете непрерывный черная полоса, в хроме и на моем телефоне/планшете я получаю разрыв 1px в верхней части каждого DIV, нарушающего черную полосу

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
<style type="text/css"> 
.test { 
    height: 100px; 
    width: 100px; 
    border-right: 3px double #c7c7c7; 
    border-left: 3px double #c7c7c7; 
    background-color: #06F; 
    padding: 0px; 
    margin: 0px; 
    border-bottom-style: 
} 
</style> 
</head> 
<body> 
<div class="test"></div> 
<div class="test"></div> 
<div class="test"></div> 
<div class="test"></div> 
<div class="test"></div> 
<div class="test"></div> 
<div class="test"></div> 
</body> 
</html>

источник

2013-05-15 user2387459

Это не ошибка. Это функция :) – maxlego

Наблюдение

Там, как представляется, сбой в алгоритме углу формирующего, что оставляет митрофорные края в рамках подготовки встречи границы на перпендикулярный крае, даже если там не один.

Я сомневаюсь, что это предполагаемое поведение, даже несмотря на то, spec говорится, что:

Данная спецификация не определяет, как границы различных стилей должны быть соединены в углу.

Вы можете увидеть доказательства митрофорный присоединиться с твердой границей 2 пикселя (скриншот):

enter image description here

Если вы посмотрите очень внимательно, вы можете увидеть проявление другой потенциальной проблемы: края верхней и боковых границ не трогают (скриншот):

enter image description here

Обход

Это сложное/неэлегантное сравнение, но один из способов устранить проблему состоит в том, чтобы скрыть верхний и нижний край оскорбительных элементов. Вам нужно будет отрегулировать размеры для вашего фактического сайта.

Пример: http://jsfiddle.net/QSm2Z/10/

.test{ 
    position: relative; 
    height: 100px; 
    width: 152px; 
    overflow: hidden; 
} 

.test:after { 
    width: 100px; 
    height: 102px; 
    content: ""; 
    top: -1px; 
    position: absolute; 
    background-color: #06F; 
    border-left: 26px double #000; 
    border-right: 26px double #000; 
}

источник

2013-05-15 21:54:40

Спасибо, что посмотрели на это, я пробовал себя с использованием прозрачной границы и/или рамки с нулевой длиной, но не повезло решить проблему, к счастью, просто меняя код производства сверху: -1px; вместо top: 0; решил это для меня, поскольку я уже использовал: перед заявлением об этом. Похож на другой для длинного списка ошибок браузера. Вы бы подумали, что такое простое базовое утверждение, как это, было бы ошибкой! – user2387459

Похож браузер ошибка - это не происходит с регулярными solid границ - проверить это: http://jsfiddle.net/QSm2Z/8/

Может быть связаны с этой ошибкой: https://code.google.com/p/chromium/issues/detail?id=61702

источник

2013-05-15 21:27:05

css border-style double 1px gap chrome

ответ

Обход

Смежные вопросы