In IE9 the text is going down below all types of input
I have an html like fol开发者_JAVA技巧lows:
<li class="liClass">
<img class="dragingClass" />
<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="" />
My 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;
}
The above css works fine in Firefox but in IE9 the label is going below all input boxes.I am not able to figure out what is wrong.
I'm in agreement with Stack 101: the html was a bit unfinished and seems to be most of the problem. As pointed out already, change type =""text"
to type="text"
and add the missing </label>
for shoe...as well as the ending </li>
at the end of the code. I adjusted all the html in this example and it rectified itself: http://jsfiddle.net/GVBJW/
I don't think it was your css...just malformed html.
精彩评论