2017-08-01 13 views
1

私はユーザーが分類と説明を選択できる選択要素があります。クロムブラウザでのみ、余分なパディングがあります。パディングは0または他のCSSタグで取り除くことができません。 Screen from Chromeクロムのselectオプション要素に余分な埋め込み

ただし、他のブラウザの同じ要素には埋め込みがありません。 firefoxのサンプル画面を参照してください。 Screen from Firefox

なぜこのような場合が考えられますか?

あなたは

+0

あなたはあなたのコードを提供することができますか? –

+0

あなたの質問に[mcve]を投稿してください。画像は素晴らしいですが、私たちはコードを好む。 – j08691

答えて

1

これは、select要素のすべてのブラウザ固有のスタイルをリセットするに役立つかもしれありがとう:

-webkit-appearance:none; 
-moz-appearance:none; 
appearance:none; 
0

UPDATE#2 私自身の経験、およびGoogleでのユーザーのものとに基づいて、これは、Windows 8およびWindows 10のディスプレイ上のユーザーに、のタッチセンシティブなの画面が表示されている場合にのみ影響します。 (私の以前の更新再無視してください:!のWindows 10およびフォント・スケーリング)

こちらをご覧ください:Chrome Support Forum - Dropdown Option Height

外観CSSそれを修正するために何も(あなたがselect要素に外観のスタイルを置けばことに注意していないん

いくつかのサンプルコードは、タッチセンシティブノートパソコンでのみ発生し、Chromeでのみ発生します。私の他のマシンはすべて正しくレンダリングされます。 IEとFirefoxはすべてのマシンで正しくレンダリングされます。

<html> 
 
<head> 
 
    <title></title> 
 
    <meta charset="utf-8" /> 
 
    <style> 
 
     html, page, body 
 
     { 
 
      padding:0; border:0; margin:0; 
 
      font-family:Tahoma, Verdana, sans-serif; 
 
      font-size:12px; 
 
     } 
 
     select { 
 
      padding: 0px 8px; 
 
     } 
 
     option { 
 
      -webkit-appearance:none; 
 
      -moz-appearance:none; 
 
      appearance:none; 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 
    <div style="padding:20px;background-color:#887b93"> 
 
     <select name="vendorId" id="vendorId"> 
 
      <option value="">--- Select Vendor ---</option> 
 
      <option value="86">Alexandra</option> 
 
      <option value="5">Alix</option> 
 
      <option value="73">Anna</option> 
 
      <option value="19">Anne</option> 
 
      <option value="60">Avant</option> 
 
      <option value="65">Blue</option> 
 
      <option value="84">Blush</option> 
 
      <option value="21">Carol</option> 
 
      <option value="89">Christos</option> 
 
      <option value="43">Claire</option> 
 
      <option value="25">Cynthia</option> 
 
      <option value="54">Dauphines</option> 
 
      <option value="22">Delphine</option> 
 
     </select> 
 
    </div> 
 
</body> 
 
</html>

+0

このバグはWin10にのみ影響すると言われていますか、または修正はWin10にのみ影響しますか? Windows 8.1では、強制的な追加のパディングも発生します。 –

+0

新しい情報で更新しました –

関連する問題