关于一个浏览器样式兼容的有关问题-HTML教程-爱易网页

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

日期：2014-05-17　浏览次数：20773 次

关于一个浏览器样式兼容的问题
我想做一个按钮提交的布局，如下代码，在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;放不下啊

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>