Проблема рендеринга границ в IE - PullRequest
Новая
       25

Проблема рендеринга границ в IE

5 голосов
/ 02 марта 2011

У меня самая странная проблема в IE (в частности, 7) при реализации границ CSS. Впервые я заметил это несколько месяцев назад.

CSS буквально это: #donate {border:1px solid #299ae5;}

Как видно из прикрепленного изображения, оба этих снимка экрана были сделаны в IE7 с одного и того же веб-сайта, разные страницы - один и тот же файл шаблона. Как будто у границы есть «хвост» в левом нижнем углу.

enter image description here

Кто-нибудь знает что-нибудь об этом ???

Редактировать: вот HTML-код (хотя я недавно видел это и на случайных сайтах в IE7, а также в полях ввода) 

<li><a href=""><span>Donate</span></a></li>

А вот и CSS: 

li { display: inline; }
li a { color: #fff; display: block; float: left; margin-right: 8px; padding-right: 8px; line-height: 1.2em; }
li a span { background: url(bg-gradient.png) repeat-x 0 0; border: 1px solid #299a35; padding: 1px 5px 2px 4px; }

Заранее спасибо!

Ответы [ 3 ]

1 голос
/ 24 августа 2011

Я склонен использовать display: inline-block ... единственное, что я бы изменил, это сделать привязку кнопкой, а не диапазоном. вот быстрый пример http://jsfiddle.net/3x4fR/2/

0 голосов
/ 16 августа 2011

jsfiddle облегчает тестирование.

Если вам не нужен диапазон, избавьтесь от него, если нет, попробуйте * zoom: 1 или каким-либо другим способом присвоить элементу hasLayout. см. пример здесь http://jsfiddle.net/ShaggyDude11/zbZr8/3/

0 голосов
/ 22 июля 2011

Дает ли элемент li a span объявление display: block; свое дело?Возможно, возникли проблемы с применением вертикального отступа для встроенного элемента.

...