Я полагаю, что может быть ошибка в рендеринге цветов границ в Chrome.Вот настройка:
- Создайте элемент (я видел его как на div, так и на td, оба: position: static и position: absolute).
- Сделать этот объект более чемв два раза выше его ширины
- Назначьте разные цветовые рамки каждой стороне.
- Укажите радиус границы для закругленных углов.
Конечный результатчто средняя часть левого края принимает цвет границы справа, а не цвет границы слева.В частности, если w - ширина объекта, то верхние пиксели w и нижние пиксели w являются правильными, но средние (h - 2w) пиксели окрашены неправильно.
Ниже приведен фрагмент кода и снимок экрана, демонстрирующий проблему.
<!doctype html>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<html>
<head>
<style>
div#borderBug
{
position:absolute;
top:10px;
left:10px;
width:152px;
height:541px;
border-width: 2px;
border-style: solid;
border-radius: 20px;
border-left-color: blue;
border-top-color: yellow;
border-right-color: red;
border-bottom-color: green;
background-color: #dedede;
}
</style>
</head>
<body>
<div id="borderBug"></div>
</body>
</html>
Моя версия Chrome - 17.0.963.56 м, работающая в WindowsXP.Я не вижу проблемы в Safari, Firefox или IE8.
Может ли кто-нибудь подтвердить, является ли это известной проблемой, или кто-нибудь знает о стандартном обходном пути?
Лучший обходной путь, который я могу придумать, - это использовать изображение для границы, но я пока не смог проверить это и посмотреть, страдает ли оно от той же ошибки.
Другим (безобразным) вариантом может быть размещение другого HTML-элемента правильного цвета поверх нарушающего раздела границы.
Заранее спасибо всем, кто может предоставить дополнительную информацию по этому вопросу.