Исправление проблем IE6 / 7 при использовании плавающих элементов внутри элемента кнопки

Question

Я создаю CSS-кнопки для ссылок и отправки форм. Я использую почти одинаковую разметку для обоих, с другой оболочкой.

Примеры HTML:

<button type="submit">
  <em>Submit</em>
  <em class="cap"></em>
</button>

<a class="button">
  <em>Submit</em>
  <em class="cap"></em>
</a>

CSS:

.button, button {
  display: block;
}
button em,
.button em {
  display: block;
  float: left;
  background: url(button.png) 0 0;
  height: 30px;
  padding: 0 0 0 10px;
}
button em.cap,
.button em.cap {
  padding: 0;
  width: 10px;
  background-position: 100% 0;
}

Теперь в IE6 / 7 работает версия якорного элемента. Проблема возникает при использовании элемента button, это приводит к переносу второго элемента em.

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

Вот пример того, что я делаю: http://keeleux.com/dev/button/

Любая помощь приветствуется!

Спасибо, Eric

Answer 1

Здесь большой стек вопросов, которые необходимо рассмотреть здесь.

Я собираюсь быть очень многословным с изменениями, необходимыми для исправления этого.

Чтобы задобрить егочтобы работать в IE6 / 7, это были мои шаги:

• Переключиться на использование display: inline-block вместо из float для внутренних органов button.
  См .: http://jsbin.com/omici3/2
• Чтобы исправить выравнивание шатков, нам нужно также добавить vertical-align: top.
  См .: http://jsbin.com/omici3/3
• Если вы посмотрите на предыдущую демонстрацию в IE7 и нажмете и удержите кнопку, вы увидите, что она слишком широкая.Мы можем исправить это с помощью overflow: visible (как здесь: IE7 проблема с заполнением CSS - не может выяснить ) и display: inline.
  См .: http://jsbin.com/omici3/4

Есть также некоторые специфические проблемы IE6 с низким приоритетом:

• Селектор button:hover не будет работать в IE6.IE6 поддерживает только :hover на a элементах.Чтобы обойти эту проблему, вы можете использовать исправление Wh независимо: hover .
• Из-за использования изображения .png в IE6 вместо прозрачности отображается серый фон;Есть исправления доступны.Хотя в этом случае это трудно заметить.Я бы сказал, что оставьте это так - дополнительные усилия не стоят улучшения*http://keeleux.com/dev/button/

  (скриншот из Firefox 4)

  • Здесь вы узнаете, почему: Возвращаясь к ошибке высоты строки кнопки Firefox ...какие-либо решения 2011 года?
  • Самый простой способ обойти это в вашем случае - просто переместить line-height во внутренние em s.
    Окончательная исправленная версия: http://jsbin.com/omici3/5

  Обратите внимание, что некоторые из этих проблем можно обойти, просто используя a вместо button.

Answer 2

@ Эрик, сэкономьте время и воспользуйтесь решением, с которым уже боролись, проверяли и проверяли во всех основных браузерах ..... Кнопки пользовательского интерфейса jQuery делают это прямо из коробки.В качестве дополнительного бонуса, они могут быть оформлены с помощью Themeroller для быстрой смены на бэкэнде и даже по выбору пользователя темы на фронтэнде.

Проверьте эту пачку для более подробной информации.