关于一个浏览器样式兼容的有关问题

2012-09-17

关于一个浏览器样式兼容的问题我想做一个按钮提交的布局，如下代码，在Chrome17和IE9下显示没问题，input跟bu

关于一个浏览器样式兼容的问题
我想做一个按钮提交的布局，如下代码，在Chrome17和IE9下显示没问题，input跟button可以显示在同一条线上，不过在Firefox13.0.1和Opera12.01下，按钮Button却会突出向上，input和Button不显示在同一条线上，想问下各位大神，这个兼容Firefox和Opera(这个不支持也无所谓)的CSS该怎么写，使得input和button可以显示在同一条线上，谢了

HTML code

<!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>

[解决办法]

CSS code

<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>
[解决办法]
因为你的容器
#main {
   width: 300px;

只有300宽啊，
150px+200px;放不下啊

热点排行