我在 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>
最佳答案
试试这个:
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) 中测试。
另一种解决方案,但不是很干净:
删除
width
来自.jui-textbox
.正在添加
float:left;
至".jui-textbox"
和改变<br/>
与<br style="clear:both"
/>.
注意: <br style="clear:both" />
太脏了。
关于html - ie7 中的内联 div 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17959141/