我是 CSS、Bootstrap 和 HTML 的新手。
我试图在我的网页上显示搜索框，在 Mozilla 中它工作正常但在 Chrome 中它不工作。
这是 Mozilla 浏览器的屏幕截图:
这是 Chrome 的:
另请注意，当我增加或减少屏幕分辨率时，控件会严重分散。以下是负责此显示的 HTML 代码片段:
<body>
<section id="customers">
<div class="container" style="margin-top:0px;">
<div class="row">
<div class="col-lg-12
<form class="form-inline" role="form" style="background:#eee">
<div class="form-group">
<input id="" class="leftText" type="text" value="" tabindex="1" name="query" autocomplete="off" placeholder="I am looking for" ></input>
<strong >in</strong>
<input id="" class="rigtTextBox" type="text" value="" tabindex="1" name="query" autocomplete="off" helptext="In the location" placeholder="In the location"></input>
<select class="rightcitydropdown">
<option>Mumbai</option>
<option>Pune</option>
</select>
</div>
<button class="btn btn-primary" id="srchBtn" >Ask Me</button>
</div><!--end of col-lg-12-->
</form>
</div><!--end of row-->
</div><!--end of container-->
</section>
</body>
在我的 CSS 中用于上述控件:
.leftText{
float :left;
border-style:solid;
border-width:5px;
border-color:#989898 ;
height:38px;
}
.rigtTextBox{
border-style:solid;
border-width:5px;
border-right-width:1px;
height:38px;
border-color:#989898 ;
}
.form-control{
border-style:solid;
border-width:5px;
border-left-width:1px;
border-color:#eee;
font-size:10px;
height:30px;
}
.form{
border-width:5px;
border-left-width:1px;
border-color:#eee;
font-size:10px;
}
.rightcitydropdown{
float:right;
border-style:solid;
border-width:5px;
border-left-width:1px;
border-color:#989898 ;
margin-right:17px;
background:white;height:38px;
}
#searchOuterdiv{
background:#F0F0F0;
}
#centralRow{
margin-top:3px;
}
strong { float:left; font-size:28px; margin:0px 10px 0 10px; height:30px; line-height:30px; color:#333333; }
#srchBtn { background:#4682B4; font-size:18px; line-height:16px;
border:none; width:125px; text-align:center;margin-top:6px;
height:35px; padding-bottom:5px; cursor:pointer; color:#333; padding-top:0px; margin-left:7px;color:white}
所以，谁能告诉我如何设置 CSS 或更正编写的代码以实现响应式外观。我希望此页面显示在多种分辨率的屏幕上，比如台式机、笔记本电脑、平板电脑等 提前致谢。
最佳答案
我建议查看类似 http://sass-lang.com/ 的内容
当涉及到在不同浏览器中看起来相同的设计时，确实没有“简单”的答案，让其他人为您处理吧
此外，http://dowebsitesneedtolookexactlythesameineverybrowser.com/
关于html - 如何为响应式设计设置 chrome 和 mozilla 的 css？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19269802/