Раздвижные двери HTML кнопки в Safari Win

Question

У меня есть следующий HTML-код для кнопок, реализующих технику раздвижных дверей, которые прекрасно выглядят во всем, кроме Safari в Windows:

<button type="submit">
    <span>Button</span>
</button>

Это соответствующий CSS:

button {
    background:url("../images/sprBgBtn.png") no-repeat right -47px;
    border:0;
    cursor:pointer;
    font-weight:bold;
    height:27px;
    line-height:27px;   
    overflow:visible;
    padding:0 26px 0 0;
    position:relative;
    text-align:center;
    text-transform:uppercase;
    width:auto;
}

button::-moz-focus-inner {
    border: none;  /* overrides extra padding in Firefox */
    padding:0;
}

button span {
    background:url("../images/sprBgBtn.png") no-repeat left top;
    display:block;
    height:27px;
    line-height:27px;
    padding:0 0 0 26px;
    position:relative;
    white-space:nowrap;
}

Если я опущу следующий код, то такая же проблема появится в FFOX:

button::-moz-focus-inner {
    border: none;  /* overrides extra padding in Firefox */
    padding:0;
}

Answer 1

я предполагаю, что эта кнопка, являясь встроенным элементом по умолчанию (если вы не переопределите его свойство отображения где-то еще в коде, которого здесь нет), вероятно, не любит, когда внутренний диапазон блокируется, поэтому неожиданное поведение в окнах сафари (и я бы взял на себя другие браузеры webkit, если только нет ничего особенного в Windows-версии Safari по сравнению с версией Mac или над Google Chrome).

Answer 2

Это также происходит для меня в Safari Win 5.0.3.Не происходит в Safari Mac 5.0.3 или Chrome Win / Mac 8+.

Поскольку это не работает только в Safari Windows, я в растерянности относительно того, как «взломать» это с помощью отрицательногополя ...

Answer 3

Похоже, сокращение правого отступа для Chrome и Safari решает проблему:

/* Safari and Google Chrome only - fix margins */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #icis_dashboard .submit_btn,
    #colorbox .submit_btn 
    {
        padding:0 23px 0 0;       
        }  

    #icis_dashboard .submit_btn span,
    #colorbox .submit_btn span {
        margin-top: -1px;
    }
}