Как убрать 3px влево и вправо на кнопках в Safari 5 - PullRequest
Новая
       40

Как убрать 3px влево и вправо на кнопках в Safari 5

2 голосов
/ 17 декабря 2010

Я пытаюсь стилизовать кнопки в моем текущем проекте кросс-браузер. Когда я проверял эти кнопки в Safari, они выглядели иначе, чем в любом другом браузере, даже в Chrome. В целом кнопки выглядят одинаково в FF, IE6-8, Opera и Chrome. Но в Safari кнопки имеют 3 пикселя неизвестного дополнительного пространства слева и справа, поэтому кнопки в Safari выглядят шире, чем в Chrome или другом браузере. Общая ширина кнопки в веб-инспекторе Safari в 6 раз больше, чем в веб-инспекторе Chrome. Кроме того, это странное поведение происходит, только если кнопки имеют ширину: авто, с фиксированной шириной кнопки выглядит просто отлично. Так как Safari и Chrome имеют одинаковый механизм компоновки (webkit), я немного смущен.

Вот демонстрация того, о чем я говорю:

http://iliadraznin.com/examples/css-only-buttons/ - отметьте синие кнопки в Chrome, а затем сравните с Safari (вы можете увидеть точную разницу в веб-инспекторе).

Upd .: Этот пример не мой, он просто показывает, как ведет себя Safari. Вот мой точный CSS и HTML: 

<button class="blueButton" type="submit">Register</button>

.blueButton {
    color:#fff;
    background:#007ec6;
    border:2px solid #211b4d;
    cursor:pointer;
font:14px Arial;
text-shadow:#003585 0 -1px 1px;
width:auto;
overflow: visible;
padding:0 13px;
height:26px;
white-space:nowrap;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
behavior:url(PIE.htc);
position:relative;}

button::-moz-focus-inner {padding:0;border:0;}

Если вы полностью удалите отступы, в Safari вы увидите именно это дополнительное небольшое пространство

Есть ли способ избавиться от этого дополнительного пространства кнопок в Safari?

1 Ответ

1 голос
/ 12 января 2011

Вот ответ, который вы ищете: 

.blueButton {
    color:#fff;
    background:#007ec6;
    border:2px solid #211b4d;
    cursor:pointer;
    font:14px Arial;
    text-shadow:#003585 0 -1px 1px;
    width:auto;
    overflow: visible;
    padding:0 13px;
    height:26px;
    white-space:nowrap;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    behavior:url(PIE.htc);
    position:relative;
}

.blueButton::-moz-focus-inner {padding:0;border:0;} 
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .blueButton {
        margin: 0px;
    }
}
...