Кнопки css: проблемы с минимальной шириной в IE7

Я хочу использовать CSS для кнопок. Для некоторых кнопок я использую элементы ввода, для других - ссылки. Для кнопок с коротким текстом я хочу установить минимальную ширину. Для всех кнопок я хочу, чтобы текст выравнивался по центру и задавал отступы. Также используется расположение таблицы портала. код ниже хорошо выглядит в FF, но не в IE7: enter image description here Кнопки css: проблемы с минимальной шириной в IE7

Неправильное выравнивание текста в входов
что-то плохое происходит с «а», когда он находится в таблице

Я знаю, что там это проблема с минимальной шириной в IE7, но она должна работать, когда установлен «display: inline-block». Также я помню, что прокладка не включается в ширину, но я не могу объяснить, что вижу. Единственный способ, который я вижу, - добавить класс «btn-short» с фиксированной шириной и удалить минимальную ширину из общей кнопки. Это лучшее решение или есть некоторые исправления для минимальной ширины для IE7?

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <style type="text/css"> 
     input.btn { 
      height: 26px; 
      display: inline-block; 
      min-width: 80px; 
      overflow:visible; 
     } 

     a.btn { 
      height: 19px; 
      display: inline-block; 
      min-width: 60px; 
      background: none repeat scroll 0 0 #008000; 
     } 

     .btn { 
      background: none repeat scroll 0 0 darkblue; 
      color: #FFFFFF; 
      font-family: Verdana, Tahoma, sans-serif; 
      font-size: 14px; 
      padding: 4px 10px 3px; 
      text-align: center; 
      text-decoration: none; 
      border: none; 
      white-space: nowrap; 
     } 

     td { 
      border: 1px solid #000000; 
     } 
    </style> 
</head> 
<body> 
<table border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
     <td> 
      <input type="submit" value="Search" class="btn"/> 
     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="button" value="Clear" class="btn"/> 
     </td> 
    </tr> 
</table> 
<br/> 
<input type="submit" value="Search" class="btn"/><br/><br/> 
<input type="button" value="Clear" class="btn"/><br/><br/> 
<input type="button" value="Change Default Values" class="btn"/><br/><br/> 
<table border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
     <td> 
      <a href="#" class="btn">Search</a> 
     </td> 
     <td>&nbsp;</td> 
     <td> 
      <a href="#" class="btn">Clear</a> 
     </td> 
    </tr> 
</table> 
<br/> 
<a href="#" class="btn">Search</a><br/><br/> 
<a href="#" class="btn">Clear</a><br/><br/> 
<a href="#" class="btn">Change Default Values</a><br/><br/> 
</body> 
</html>

источник

2014-02-21 Valentina Chumak

http://jsfiddle.net/P3v57/1/ –

Вы должны использовать [хак] (http://stackoverflow.com/questions/6544852/ie7-does-not-understand-display-inline-block) для работы 'display: inline-block' для IE7 – Vucko

@AmarnathBalasubramanian Как я понимаю, вы вставляете мой код в jsfiddle. Я не делал этого, потому что jsfiddle не работает в IE7. Зачем ты это сделал? –

inline-block не работает на IE7, вам нужно вызвать hasLayout с помощью zoom: 1; включая display: inline подделать display-inline эффект:

input.btn { 
    height: 26px; 
    display: inline-block; 
    *display: inline; 
    *zoom: 1; 
    min-width: 80px; 
} 

a.btn { 
    height: 19px; 
    display: inline-block; 
    *display: inline; 
    *zoom: 1; 
    min-width: 60px; 
    background: none repeat scroll 0 0 #008000; 
}

FYI:star-hack используется для IE 6/7.

источник

2014-02-21 10:05:15

Благодарим вас за ответ, но это не поможет. Результат выглядит одинаково (я дважды проверял). –

Это работает на вашем IE7? –

@ValentinaChumak Вам, вероятно, нужно использовать взломанную «минимальную ширину» для IE 6/7. взгляните на: http://stackoverflow.com/questions/7068967/css-how-to-make-ie7-respect-min-width –

Кнопки css: проблемы с минимальной шириной в IE7

ответ

Смежные вопросы