<button> дополнительная проблема заполнения в Safari - PullRequest
Новая
       31

<button> дополнительная проблема заполнения в Safari

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

Пример страницы: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Button test</title>
    <style>
      * { border: none; margin: 0; padding: 0; }

      body { padding: 5em; }

      span { background: lightblue; display: inline-block; }

      button { background: red; outline: 1px solid red }
      button div { background: yellow; }

      button::-moz-focus-inner {
        padding: 0;
        border: 0;
      }
      button {
        -webkit-appearance: none;
        -webkit-box-sizing: content-box;
        -webkit-box-align: start;
        -webkit-border-fit: lines;
        -webkit-margin-collapse: discard;
      }
    </style>
  </head>

  <body>
    <span>Adjacent text</span><button><div>Button</div></button>
  </body>
</html>

Вот изображение:

image

Вы можете увидеть дополнительный белый отступ в кнопке. Можно ли избавиться от этого отступа в браузере Safari?

Ответы [ 5 ]

2 голосов
/ 31 марта 2012

Немного опоздал на вечеринку, но я обнаружил, что переход через границы веб-набора с:

-webkit-border-fit:border !important;

доставил мне удовольствие.Особенно полезно для Magento, где свойство webkit-border-fit иногда полезно, но может вызывать проблемы у некоторых <button>.

1 голос
/ 02 апреля 2012

Проблема исправлена ​​в некоторых версиях Safari, я не уверен, что именно, но в последней (5.1.5) она работает для меня.

1 голос
/ 25 июля 2011

Следующий CSS из Группа Filament уже некоторое время работает для меня во всех браузерах.Основа CSS, чтобы лишить кнопки всех их стилей, выглядит следующим образом:

span используется для техники раздвижных дверей (лучше чем div, который вы используете в настоящее время, это можетпроблема), полный список стилей можно найти по ссылке. 

button { 
    position: relative;
    border: 0; 
    padding: 0;
    cursor: pointer;
    outline: none; /* for good measure */
    overflow: visible; /* removes extra side padding in IE */
}

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

button span { 
    position: relative;
    display: block; 
    white-space: nowrap;    
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    /* Safari and Google Chrome only - fix margins */
    button span {
        margin-top: -1px;
    }
}
0 голосов
/ 25 июля 2011 
button { background: red; outline: 1px solid red, position: fixed; }

Чтобы исправить проблему с дополнительными отступами в Chrome и Safari.Вы должны будете указать position: fixed, это решило проблему для меня.надеюсь, это сработает и у вас, ребята!

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

Элементы формы, такие как <button>, обычно реализуются / отрисовываются как собственный элемент управления ОС, поэтому они могут выглядеть и вести себя по-разному в разных браузерах. Если вы хотите полностью контролировать стиль, вам лучше использовать тег <a>.

...