0

CSS、ブートストラップ、HTML は初めてです。

Web ページに検索ボックスを表示しようとしています。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

メディアクエリを使用できます

元。

@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 に答える