Strange floating and padding in IE7
I have this simplified code:
<div class="container">
<input type="submit" name="submit" class="submit" value="Sign Up">
</div>
And the CSS for it:
input.submit{
padding-left: 40px;
padding-right: 40px;
float:right;
}
.container{
background-color: #AAA;
float:right;
padding: 开发者_开发知识库50px;
}
I expect the div to wrap around the input button, float to the right, and its size is equal to the button's size + the padding (50px). In other browsers it works perfectly, but there are 2 strange things happen in IE7:
- The width of the div stretches to the whole webpage. If I remove float:right from CSS of input.submit, then the size of the div is correct.
- The input button's width is also much larger than when the button is displayed in other browsers.
This is the doc type I use:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Anyone know why these problems happen and how to solve them?
I don't see why you need float: right on input.submit, so just remove it. If there is a reason you need it, you'll have to show me why - there might be a workaround.
To fix the second problem, add overflow: visible to input.submit.
After those two changes, it looks virtually the same in IE7 and IE9: http://jsfiddle.net/33vmm/
加载中,请稍侯......
精彩评论