smartZone

Блог им. RayZ / Задача: Кнопки в Internet Explorer и волшебные пространства

Столкнулся с проблемой укрощения кнопок под Internet Explorer. Для наглядности имеем следующий код:
<html>   <style type="text/css">     .hacked {       width:auto;       overflow: visible;       padding: 0px 6px;       margin: 0px;     }   </style>   <body>     <div style="padding:10px;">       <input type='button' value="THIS BUTTON HATES IE" >       <input type='button' class='hacked' value="THIS BUTTON HATES IE.hacked">     </div>          <div style="padding:10px;">       <table border=1>         <tr>           <td align="center" class='container'>             <input type='button' value="THIS BUTTON HATES IE">           </td>           <td align="center" class='container'>             <input type='button' class='hacked' value="THIS BUTTON HATES IE.hacked">           </td>         </tr>       </table>     </div>   </body> </html> * This source code was highlighted with Source Code Highlighter.
Поясню, известен известный хак/твик, с помощью которого возможно сделать так что бы ширина кнопки в Internet Explorer была визуально такая же как и в других броузерах. Достаточно, как оказалось, добавить в стилях для кнопки это: width:auto; overflow: visible; Какого было мое удивление, когда данная кнопка была помещена в «контейнер». К примеру в ячейку таблицы. Общая картина в обычном браузере выглядит примерно так: Firefox buttons test В Internet Explorer: Internet Explorer buttons testInternet Explorer buttons test. А теперь вопрос! Как укротить 4-ю кнопку в Internet Explorer? Ячейки являются inline-блоками, кнопка — inline, откуда дополнительное пространство?

Источник: Уроки CSS на Хабрахабре