私はブラウザ間での CSS にかなり慣れていないので、これが単純または明白である場合は申し訳ありません。
JQueryUI オートコンプリート/コンボボックス検索機能を備えたリーフレット マップがあります。すべてがうまく機能しています。私はChromeでそれを望むように見ています。
Safari または Firefox でコンボボックスを見ると、1 ピクセルほどずれています (横のボタンは、入力ボックスの上または下に 1 ピクセルまたは 2 ピクセルあります)。スクリーン ショットでわかるように、見栄えもよくありません。以下はCSSコードとスクリーンショットです。
私の質問は、ブラウザ間でコンボボックスを整列させるために、どの CSS プロパティを使用する必要があるかということです。ブラウザー間の不一致について説明している Web サイトはありますか?
Combobox に関連する現在の CSS:
.custom-combobox {
position: relative;
display: inline-block;
margin: 2px;
}
.custom-combobox-toggle {
position: absolute;
top: -1px;
bottom: 0;
margin-left: -1px;
padding: 0;
/* support: IE7 */
*height: 1.7em;
*top: 0.1em;
}
.custom-combobox-input {
margin: 0;
padding: 0.3em;
width: 140px;
}
.custom-combobox .ui-button-text {
height: 14px;
}
Chrome バージョン (良さそう):
Firefox のバージョン (見栄えが悪い):
Safari バージョン (同じくオフ):