Проблема с границей радиуса и одной более толстой границей в Webkit - PullRequest
2 голосов
/ 19 января 2012

Хорошо, я искал и искал на google, stackoverflow, других сайтах проблему, касающуюся того, как webkit обрабатывает комбинацию границы-радиуса, ширины границы и цвета, примененного к блоку, причем одна сторона имеет более толстую границу иразные цвета границы.

Я тестировал и тестировал как в проекте, над которым я сейчас работаю, так и в JSfiddle.

Я создал JSfiddle с несколькими тестовыми примерами в нем, что иллюстрирует то, чтостили делают и не влияют на эту ошибку.http://jsfiddle.net/kGST9/4/

Вы увидите, что большинство коробок имеют полосу красного цвета в центрах верхней и нижней границ.Вы также заметите, что в разных тестовых примерах ширина полосы красного цвета варьируется в зависимости от того, что я нашел, от ширины левой границы и ширины рамки.Я считаю, что действительно не имеет значения, с какой стороны находится более толстая граница, и она будет вести себя одинаково.Это происходит только в webkit, как в последних версиях Safari 5, так и в Chrome 16, и я предполагаю, что это относится ко всем версиям webkit, поддерживающим радиус границы.

Firefox не отображает эту проблему.

Я даже не смог найти никого, кто бы говорил об этой ошибке на форуме или в блоге, и не думаю, что это единственная проблема.lol

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

Так что помогите мне разобраться в этом, если хотите.

С уважением,
CSSDevMonkey

Ответы [ 2 ]

0 голосов
/ 31 января 2012

Я только что наткнулся на этот пост, и у меня есть похожая ошибка с радиусом границы и разным отношением ширины к высоте в div. Я не использую границы разных размеров, но разные цвета.

Если у меня есть радиус границы и цвет границы: красный, синий, красный, левая граница получает полосу синего цвета в зависимости от размера. Кажется, только в браузерах Web-Kit, и я не могу найти какой-либо работы вокруг. Я думаю, это ошибка, если вы не нашли решение.

Подними мой jsfiddle с моей проблемой.
http://jsfiddle.net/6xUNr/

0 голосов
/ 19 января 2012

Очень странно. После того, как я поигрался с ним, я обнаружил, что наличие ошибки (и ее серьезность) связано с сочетанием общей ширины и высоты блока, а также размера радиуса границы. Я могу избавиться от проблемы (во всех случаях, кроме одного), увеличив радиус границы до 20 пикселей. Кроме того, уменьшение ширины каждого div до 200px, похоже, решает проблему.

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

...