КНОПКА IE7 белый контур - PullRequest
Новая
       15

КНОПКА IE7 белый контур

6 голосов
/ 06 июля 2010

Кто-нибудь знает, почему IE6 и IE7 добавляют белую границу между button границей и фоном?

Вот мои CSS и HTML: 

#reportButton{
    background:#fefcda url(buttonback.png) repeat-x bottom left;
    border-top:2px solid #fffff8;
    border-right:2px solid #e3b40c;
    border-bottom:2px solid #e3b40c;
    border-left:2px solid #fffff8;
    color: #373535;
    font-weight: bold;
    margin:0 2%;
    width:45%;
}

<button id="reportButton">Report a Concern</button>

Если вы попробуете это, вы увидите забавную белую границу между границами и фоном.Это не появляется ни в каком другом браузере, даже в IE8.

У кого-нибудь есть простое исправление или предложение относительно того, что я делаю неправильно?

Спасибо!

РЕДАКТИРОВАТЬЯ только что заметил, что когда я нажимаю на кнопку, появляются муравьи, и белая рамка исчезает.Кажется, что, когда кнопка :active, они исчезают, хотя это не очень помогает с точки зрения решения проблемы, может быть, это будет кому-то еще.

Кроме того, извините, я не могу предоставить экран;У меня нет места, чтобы загрузить его сейчас через это интернет-соединение.

EDIT2: На самом деле кажется, что граница не белая, а background-color кнопки.Похоже, что IE оставляет разрыв в 1 пиксель между границей кнопки и фоновым изображением кнопки.

Ответы [ 2 ]

4 голосов
/ 12 ноября 2010

У меня была та же проблема ... изящный прием, который, кажется, работает по крайней мере для IE «Белый» контур - это на самом деле цвет фона вашего изображения. Так что установите его так же, как ваш цвет границы. Если вы не возражаете против немного толстой границы, остановитесь там. Если граница слишком толстая, установите цвет рамки на цвет фона страницы.

например. чтобы отобразить черную «рамку», используйте эту CSS для своей кнопки: background: url (./ button_bg.gif) без повторов; цвет фона: # 000000; граница: 1px solid #FFFFFF;

1 голос
/ 06 июля 2010

Убедитесь, что эта граница не исходит от самого изображения (фон изображения), установите точные значения width и height, а также попробуйте установить padding в 0, как сказал @SLaks.

...