在IE9中,文本低于所有类型的输入

时间:2011-08-15 10:17:31

标签: css internet-explorer-9

我有一个html如下:

<li class="liClass">
  <img class="dragingClass" />
  &nbsp;<img class="removeClass" />
  <label for="shoe" class="ShoeClass">
  <select class="width_150">
    <option>blackShoe</option>
    <option>greenShoe</option>
    <option>redShoe</option>
  </select>

 <label for="price" class="priceLabelClass">foo1</label>
 <input type =""text" style="width:3em" class="priceInputClass" value="" />

 <label for="minSize" class="minSizelabelClass">
 <input style="width:4em" class="minSizeInputClass" value="" />

我的Css:

.liClass {
clear: left;
padding: 5px 0;
}

li.pushedProduct img.dragingClass{
float: left;
cursor: move;
}

li.pushedProduct img.removeClass{
float: left; 
padding-left:4px;
 }

.liClass label {
float: left;
padding: 0.1em 1em 0 1em;
width: 5em;
text-align: right;
 }

  label.ShoeClass {
float: left;
width: 2em;
 }

 label.priceLabelClass {
float: left;
width: 3em;
 }

  label.minSizelabelClass{
float:left;
width: 3.5em;
  }

 .liClass input {
float: left;
width: 15em;
  }


  .liClass select {
display: inline;
float: left;
width: 150px;
 }

以上css在Firefox中工作正常,但在IE9中,标签位于所有输入框的下方。我无法弄清楚出了什么问题。

1 个答案:

答案 0 :(得分:0)

我同意Stack 101:html有点未完成,似乎是大部分问题。正如已经指出的那样,将type =""text"更改为type="text"并为鞋子添加缺少的</label>以及代码末尾的结尾</li>。我调整了这个例子中的所有html,并自行纠正:http://jsfiddle.net/GVBJW/ 我不认为这是你的CSS ...只是格式错误的HTML。