ie7에서 인라인 div 문제가 발생했습니다.

Question

JQuery에서 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

자바 스크립트, IE7에 있기 때문에 간단한 해킹 : 아무튼 초점을 여기에

내 위젯이 생성 무엇의 추출물 일하지 마라. ie7-js project을 살펴보십시오.

IE7.js는 마이크로 소프트 인터넷 익스플로러는 표준 호환 브라우저처럼 를 동작하도록하는 자바 스크립트 라이브러리입니다. 은 많은 HTML 및 CSS 문제를 수정하고 은 IE5 및 IE6에서 투명 PNG가 올바르게 작동합니다.

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 : IE7 (비스타)에서 테스트

<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> 

.

데모 : http://jsfiddle.net/PENFT/

또 다른 해결책은, 그러나 매우 깨끗 아니다 :

• 이 .jui-textbox에서 width 제거.

• float:left;을 ".jui-textbox"으로 변경하고 <br/>을 <br style="clear:both" />으로 변경하십시오.

참고 :<br style="clear:both" />는 그렇게 더러운.