Как я могу настроить свой CSS так, чтобы Firefox учитывал отступы, когда дочерний тег имеет ширину: 100%? - PullRequest
Новая
       20

Как я могу настроить свой CSS так, чтобы Firefox учитывал отступы, когда дочерний тег имеет ширину: 100%?

1 голос
/ 18 ноября 2011 
<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    button {
      border-width: 1px;  
      border-style: solid;
      border-color: black;
      -moz-background-clip: padding-box;
      -webkit-background-clip: padding-box;
      background-clip: padding-box;
      font-family: Verdana, Geneva, sans-serif;
      font-size: 13px;
      height: 28px;
      padding: 0 10px 0 10px;
      max-width: 180px;
    }
    button > span {
      width: 100%;
      height: 100%;
      white-space: nowrap;
    }
    .text {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
    }
  </style>
</head>
<button>
  <span>
    <span class="icon"></span><!-- This will push the text to the right when its shown -->
    <span class="text">Button text that is really, really long</span>
  </span>
</button>
</html>

Приведенный выше код содержит полную HTML-страницу, которую можно скопировать / вставить в текстовый редактор и отобразить в вашем браузере. Проблема, с которой я столкнулся, заключается в том, что мне нужен текст, чтобы заполнить 100% доступной ширины при соблюдении отступов в 10 пикселей слева и справа. Показанный здесь CSS работает для последних версий Chrome, Safari и IE. Однако в Firefox (версии 7 и 8) отступы не соблюдаются.

Я понимаю, что если я уберу отступ и изменит ширину текста на 95%, он будет выглядеть аналогично, но я надеюсь избежать этого, если это возможно.

Посоветуйте, пожалуйста, как это можно настроить для Firefox и продолжайте корректно работать в других браузерах. Спасибо за ваше время.

1 Ответ

1 голос
/ 18 ноября 2011

Я не совсем уверен, что это лучший способ, но он работает: 

button::-moz-focus-inner {
    padding: 0 10px;
}

Ваш оригинальный код: http://jsbin.com/ebinem

С моим исправлением: http://jsbin.com/ebinem/2

...