0

私はブラウザ間での 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 バージョン (良さそう):

見栄えの良いChromeバージョン

Firefox のバージョン (見栄えが悪い):

ここに画像の説明を入力

Safari バージョン (同じくオフ):

ここに画像の説明を入力

4

1 に答える 1

0

動作しました。犯人は次のとおりです。

  • em のサイジング - Chrome と Firefox では、同じフォントの Em の大きさについて異なる考えを持っているようです
  • 相対位置と絶対位置 -.custom-combobox並べて比較すると、クラスの相対位置が位置を台無しにしていた。Chrome と Firefox では、相対的な位置付けのために位置がわずかに異なる値を持っていると思います。
于 2013-10-03T06:19:15.530 に答える