Question

我不熟悉CSS，Bootstrap＆amp; HTML。

我正在尝试在我的网页上显示搜索框，在Mozilla中它工作正常，但在Chrome中却无法正常工作。

以下是Mozilla浏览器的屏幕截图：

enter image description here

，这是Chrome：

enter image description here

另请注意，当我增加或减少屏幕分辨率时，控件的分散会很糟糕。以下是负责此显示的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或纠正编写的代码以使响应的外观。我希望这个页面显示在多个分辨率的屏幕上，比如台式机，笔记本电脑，平板电脑e.t.c 提前谢谢。

Answer 1

我建议您查看http://sass-lang.com/

之类的内容

真的没有＆＃34;容易＆＃34;回答在不同浏览器上看起来相同的设计，让其他人为你处理它

此外，http://dowebsitesneedtolookexactlythesameineverybrowser.com/

Answer 2

您可以使用媒体查询

实施例

@media only screen and (min-width: 768px) and (max-width: 959px) {
  .box {
     color:#9d9d9d;
     font-size:12px;
     line-height:18px;
     margin: 0 auto;
     padding: 0;
     position: relative;
     width: 960px;
  }
}

在其中，你可以为firefox声明这个类：

.box, x:-moz-any-link, x:default { color:#000; }

因此，Chrome，IE，opera和safari的类框将具有＃9d9d9d的颜色，而firefox将具有＃000。

如何为响应式设计设置chrome和mozilla的css？

2 个答案: