0

我是 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 或正确的书面代码以做出响应式外观。我希望这个页面显示在多个分辨率的屏幕上，比如台式机、笔记本电脑、平板电脑等。在此先感谢。

4

2 回答 2

0

我建议您查看类似http://sass-lang.com/的内容

当涉及到在不同浏览器中看起来相同的设计时，真的没有“简单”的答案，让其他人为您处理

此外，http://dowebsitesneedtolookexactlythesameineverybrowser.com/

于 2013-10-09T10:45:53.730 回答
0

你可以使用媒体查询

前任。

@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。

于 2013-10-09T11:14:03.590 回答