inline div issue in ie7

Question

Я создал простой виджет в JQuery, который обертывает texboxes в div, добавляет прозрачную текстовую кнопку и местозаполнитель. Добавлены основные биты для этого в http://jsfiddle.net/BpkDN/, что-то в CSS, которое я не могу найти, это возиться с стилем в ie7. Кажется, работает в любой другой версии.

Вот выдержка из того, что производит мой виджет:

CSS:

::-ms-clear { 
     display: none; 
    } 
.jui-textbox { 
    border: 1px solid #DADADA; 
    position: relative; 
    padding:0 !important; 
    white-space: nowrap; 
    background: #fff; 
    overflow: hidden; 
    height: 33px; 
    line-height: 33px; 
    display: inline-block; 
    *display:inline; 
    margin: 10px 0; 

} 

.jui-textbox input { 
    background-color: transparent; 
    color: #313131; 
    height: 33px !important; 
    line-height:33px\9; 
    width: 300px; 
    font-size: 14px; 
    font-family: 'Open Sans', sans-serif; 
    padding: 0; 
    margin: 0 5px !important; 
    border: none; 
    float:left; 
} 

.jui-textbox-placeholder { 
    position: absolute; 
    font-size: 14px; 
    font-family: 'Open Sans', sans-serif; 
    color: #A1A1A1; 
    height: 33px; 
    line-height: 33px; 
    padding: 0; 
    margin: 0; 
    left: 5px; 
    overflow: hidden; 
    cursor: text; 
} 


.jui-textbox-hover { 
    border: 1px solid #CACACA; 
} 
.jui-textbox-active { 
    border: 1px solid #a1a1a1; 
} 

.jui-textbox-clear.show{ 
    display:inline-block !important; 
    *display:inline !important; 
} 
.jui-textbox-clear { 
    display:none; 
    cursor: pointer; 
    background: #fff; 
    border-left: 1px solid #a1a1a1; 
    width: 33px; 
    height: 33px; 
    background-image:url(icons/x.png); 
    background-position:center; 
    background-repeat:no-repeat;  
} 
.jui-hoverable:hover,.jui-hoverable-hovered 
{ background-color: #f1f1f1;} 

textarea:focus, input:focus{ 
    outline: none; 
} 

Html

<div class="jui-textbox"> 
    <div class="jui-textbox-placeholder" unselectable="on" style="font-size: 14px;">             
      Default 
    </div> 
    <input type="text" style="width: 300px;"> 
    <div class="jui-textbox-clear jui-hoverable jui-icons-x"></div> 
</div> 

Answer 1

В этом случае JavaScript является простой хак, потому что в IE7: фокус Безразлично Не работай. Взгляните на ie7-js project.

IE7.js библиотека JavaScript, чтобы Microsoft Internet Explorer ведет себя как стандарты веб-обозреватель. Он исправляет многие проблемы HTML и CSS, а делает прозрачную работу PNG правильно под IE5 и IE6.

Обновление MSIE5.5-7 для совместимости с MSIE8.

<!--[if lt IE 8]> 
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script> 
<![endif]--> 

Вы также можете обратиться к this SO question. IE7 doesn't support this pseudo class.

Answer 2

Попробуйте это:

CSS:

::-ms-clear { 
     display: none; 
    } 
.jui-textbox { 
    width: 300px; 
    border: 1px solid #DADADA; 
    position: relative; 
    padding:0 !important; 
    white-space: nowrap; 
    background: #fff; 
    overflow: hidden; 
    height: 33px; 
    line-height: 33px; 
    display: inline-block; 
    /**display:inline;*/ 
    margin: 10px 0; 
} 

.jui-textbox input { 
    background-color: transparent; 
    color: #313131; 
    height: 33px !important; 
    line-height:33px\9; 
    width: 300px; 
    font-size: 14px; 
    font-family: 'Open Sans', sans-serif; 
    padding: 0; 
    margin: 0 5px !important; 
    border: none; 
    float:left; 
} 

.jui-textbox-placeholder { 
    position: absolute; 
    font-size: 14px; 
    font-family: 'Open Sans', sans-serif; 
    color: #A1A1A1; 
    height: 33px; 
    line-height: 33px; 
    padding: 0; 
    margin: 0; 
    left: 5px; 
    overflow: hidden; 
    cursor: text; 
} 


.jui-textbox-hover { 
    border: 1px solid #CACACA; 
} 
.jui-textbox-active { 
    border: 1px solid #a1a1a1; 
} 

.jui-textbox-clear.show{ 
    display:inline-block !important; 
    *display:inline !important; 
} 
.jui-textbox-clear { 
    display:none; 
    cursor: pointer; 
    background: #fff; 
    border-left: 1px solid #a1a1a1; 
    width: 33px; 
    height: 33px; 
    background-image:url(icons/x.png); 
    background-position:center; 
    background-repeat:no-repeat; 
    position: absolute; 
    right: 0; 
} 
.jui-hoverable:hover,.jui-hoverable-hovered 
{ background-color: #f1f1f1;} 

textarea:focus, input:focus{ 
    outline: none; 
} 

HTML:

<div class="jui-textbox"> 
     <div class="jui-textbox-placeholder" unselectable="on" style="font-size: 14px;"> 
       Default 
     </div> 
     <input type="text" style="width: 300px;"> 
     <div class="jui-textbox-clear jui-hoverable jui-icons-x"></div> 
    </div> 
    <br/> 
<div class="jui-textbox"> 
     <div class="jui-textbox-placeholder" unselectable="on" style="font-size: 14px;"> 
       Focused 
     </div> 
     <input type="text" style="width: 266px;"> 
     <div class="jui-textbox-clear jui-hoverable jui-icons-x show"></div> 
</div> 

Испытано в IE7 (Vista).

Демо: http://jsfiddle.net/PENFT/

Другим решением, но это не очень чистый:

• Удаление width из .jui-textbox.

• Добавление float:left; в ".jui-textbox" и замена <br/> на <br style="clear:both" />.

Примечание:<br style="clear:both" /> его так грязно.