Div ширины некорректной в IE7 - Невозможно установить ширину, должна быть кнопкой расширения, если символы добавляются

Question

http://jsfiddle.net/Birdie/pYbgL/1/

Привет всем - Я надеюсь, что вы можете помочь мне найти решение этой IE7 шириной несовпадение.

Проблема:

Это для кнопки. Содержимое этой кнопки будет меняться часто, поэтому кнопка должна иметь возможность расширения. Во всех браузерах и версии IE EXCEPT IE7 эта кнопка имеет размер, который должен быть. В IE7 эта кнопка отображается со скоростью 100%. Теперь мне бы хотелось, чтобы у меня была возможность пощекотать ширину, максимальную ширину, но опять же, она должна иметь гибкую ширину.

HTML-:

<div class="tennant-orange-btn"> 
    <span>Orange Button</span> 
</div> 

CSS-:

.tennant-orange-btn { 
     border-radius: 5px; 
     color: #FFF; 
     display: inline-block; 
     font-size: 18px; 
     font-family: 'PT Sans', sans-serif; 
     padding: 4px 15px 5px 8px; 
     text-decoration: none; 
     text-align: left; 
     background: #ff8331; 
     } 
    .tennant-orange-btn span { 
     background: url("images/cogwheel.png") no-repeat top left; 
     white-space: nowrap; 
    } 

Большое спасибо заранее!

Answer 1

Попробуйте сделать следующие изменения в CSS:

.tennant-orange-btn { 
     border-radius: 5px; 
     color: #FFF; 
     display: block; 
     float: left; 
     font-size: 18px; 
     font-family: 'PT Sans', sans-serif; 
     padding: 4px 15px 5px 8px; 
     text-decoration: none; 
     text-align: left; 
     background: #ff8331; 
} 

Answer 2

Проблема заключается в том, что IE7 не понимает display: inline-block;.

Вы можете использовать хак, хотя, который заставит его работать так, как вы ожидали:

display: inline-block; 
*display: inline; 
zoom: 1; 

---

Примечание: если вы создаете кнопку, вы должны использовать button элемент. HTML - это не только серия div s и span s.