Фоновое изображение поля на кнопке в IE - PullRequest
Новая
       16

Фоновое изображение поля на кнопке в IE

3 голосов
/ 21 октября 2011

Кто-нибудь знает, почему вокруг фонового изображения кнопки есть поле (около 1 пикселя), только в Internet Explorer?

Попробуйте этот код в IE против Firefox: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>test</title>
    <style type='text/css'>
        button {
            background: grey url("http://eagle.phys.utk.edu/guidry/android/images/red_square.png") 0px 0px repeat-x;
            border: 1px solid black;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <button>LOL</button>
</body>
</html>

Вот как это отображается на моем компьютере в IE9 (в большом размере):

button with background-image margin in IE

Примечание: если я уберу (черную) границу, поле исчезнет.

Спасибо.

Ответы [ 3 ]

1 голос
/ 21 октября 2011

Браузеры Differnet имеют разные определения тега кнопки (и других тегов).На самом деле Chrome имеет запас в 2 пикселя.Вы можете легко решить эту проблему, явно указав поле: 

button {
    background: grey url("http://eagle.phys.utk.edu/guidry/android/images/red_square.png") 0px 0px repeat-x;
    border: 1px solid black;
    font-size: 24px;
    margin: 0; /* or ex 1px */
}

Обновление:

Я думаю, что это семейство шрифтов (или его рендеринг), котороепо-другому, попробуйте: 

button {
    background: grey url("http://eagle.phys.utk.edu/guidry/android/images/red_square.png") 0px 0px repeat-x;
    border: 1px solid black;
    font-size: 24px;

    /* To get it exact */
    margin: 0; /* or ex 1px */
    padding: 0; /* or ex 1px */

    font-family: Consolas;
}

Обновление: Без <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Я могу воспроизвести проблему.И в этом случае IE работает в режиме Quirks.Включаете ли вы doctype, когда тестируете его?

В любом случае, вам просто нужно избегать режима причуд: http://www.google.dk/search?aq=0&oq=avoid+qui&gcx=c&sourceid=chrome&ie=UTF-8&q=avoid+quirks+mode Ex избегайте НИЧЕГО перед doctype.

0 голосов
/ 21 октября 2011

Различные браузеры имеют разные общие стандарты стилей для разных элементов HTML. Чтобы избежать этой проблемы (или защищаться от нее как можно лучше!), Вы должны действительно включить таблицу стилей сброса на все свои сайты, чтобы попытаться синхронизировать стили всех браузеров, насколько это возможно. Одно из величайших достижений, которое я нашел, - это Erics Archived мысли:

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Обычно это помогает (с небольшими изменениями после предпоследнего кросс-браузерного теста).

0 голосов
/ 21 октября 2011

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

...