关于一个浏览器样式兼容的有关问题
日期：2014-05-17 浏览次数：20746 次
关于一个浏览器样式兼容的问题
我想做一个按钮提交的布局，如下代码，在Chrome17和IE9下显示没问题，input跟button可以显示在同一条线上，不过在Firefox13.0.1和Opera12.01下，按钮Button却会突出向上，input和Button不显示在同一条线上，想问下各位大神，这个兼容Firefox和Opera(这个不支持也无所谓)的CSS该怎么写，使得input和button可以显示在同一条线上，谢了
------解决方案--------------------
我想做一个按钮提交的布局，如下代码，在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;放不下啊
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
