Home > Article > Web Front-end > About a browser style compatibility issue_html/css_WEB-ITnose
About a browser style compatibility issue_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:14:38876browse
I want to make a button submission layout. The following code displays no problem under Chrome17 and IE9. The input and button can be displayed on the same line. However, under Firefox13.0.1 and Opera12.01, the button Button will Protruding upward, the input and button are not displayed on the same line. I would like to ask all the experts how to write this CSS that is compatible with Firefox and Opera (it doesn’t matter if it is not supported) so that the input and button can be displayed on the same line. Thanks
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=7" /><title>Test</title><style type="text/css">#main { width: 300px; margin: 50px auto; border: 0px solid #000;}#main .inp { margin: 0px; padding: 0px; width: 200px; height: 30px; line-height: 30px; border: 1px solid #C7CCD1; border-right-width: 0px;}#main .btn { margin: 0px; height: 32px; border: 1px solid #C7CCD1; font-size: 14px;}</style></head><body> <div id="main"> <input type="text" class ="inp" /><button class ="btn" type="button">提交</button> </div></body></html> Reply to the discussion (solution)
<style type="text/css">#main { width: 300px; margin: 50px auto; border: 0px solid #000;}#main .inp { margin: 0px; padding: 0px; width: 200px; height: 30px; line-height: 30px; border: 1px solid #C7CCD1; border-right-width: 0px; float:left;}#main .btn { margin: 0px; height: 32px; line-height:32px; border: 1px solid #C7CCD1; font-size: 14px; float:left;}</style> Just add two floats
CSS code
080b747a20f9163200dd0a7d304ba388
#main {
width: 300px;
margin: 50px auto;
border: 0px solid #000 ;
}
#main .inp {
margin: 0px;
padding: 0px;
width: 200px;
height: 30px;
…
Tried and worked 1
There is a problem. I add a width to btn, such as "width: 150px", and the buttons will be arranged under the input tag
Because of your container
#main {
width: 300px;
is only 300 wide,
150px 200px; can’t fit