Блог

Главная - Вопросы по программированию - Кнопка отправки усекается в ie7

Кнопка отправки усекается в ie7

#javascript #css

#javascript #css

Вопрос:

Я планирую использовать кнопки пользовательского интерфейса в стиле Google Plus Брюса Галпина на своем веб-сайте — code.brucegalpin.com/google-plus-ui-buttons/

Это прекрасно работает в Chrome, Firefox и ie8 . Однако в ie7 кнопка отправки отображается усеченной.

 <button class="action blue"><span class="label">Save</span></button>

Я создал jsfiddle с HTML и CSS — http://jsfiddle.net/22S2N /

Чтобы просмотреть вывод непосредственно в браузере (в ie7), нажмите здесь — http://jsfiddle.net/22S2N/embedded/result /

Может кто-нибудь, пожалуйста, подсказать мне, как это исправить в ie7

Комментарии:

1. Так много важных, очень страшно.

2. IE7 не поддерживает встроенный блок.

3. Спасибо за ваш ответ @epascarello. Можете ли вы предложить обходной путь?

4. Найдите на этом сайте IE7 inline block И действительно ли у вас большое количество пользователей, использующих IE7? Кажется пустой тратой времени.

5. Спасибо @epascarello. Я согласен, что количество пользователей ie7 невелико. Однако в некоторых случаях я заметил, что текст в кнопке усекается полностью (в этом примере он усекается частично). Вот почему я пытаюсь решить эту проблему.

Ответ №1:

Наткнулся на этот ответ, предоставленный самим Брюсом Галпином в разделе комментариев этой демонстрационной страницы. http://code.brucegalpin.com/google-plus-ui-buttons/demo.html

«Похоже, проблема в теге button, поэтому, если вы хотите, чтобы кнопки действий отображались в IE7, просто используйте: 

    <a href="#" class="button action blue"><span class="label">Save</span></a>

вместо 

    <button class="action blue"><span class="label">Save</span></button>

То же самое относится к значкам и кнопкам, замените 

   <button><span class="label">Button</span></button>

с 

  <a href="#" class="button"><span class="label">Button</span></a>

Достойный обходной путь. Подумал, что другие могут счесть это полезным.