0

私が開発しているフォーム プラグインの一部であるこのカスタム選択メニューに取り組んでいます。

私のcssでは、次のようなものがあります：

.qval-select span {
    font-size: 15px;
    display: block;
    padding: .3em .8em;
    cursor: pointer;
}

これspanは、カスタム セレクト メニューの項目です。

ある時点で、アイテムを知り、outerHeight()計算を行う必要があります。私が抱えている問題は、Chrome が高さを報告し、25px他のすべてのブラウザー (IE8、IE9、Firefox) が報告すること27pxです。おもしろいのは、Chrome だけが探している番号を取得しているように見えることです。

私が何を意味するかを確認するために、ここに例をアップロードしました。

http://spacirdesigns.com/idealforms/ .

カスタム選択メニューを開き、上下の矢印でスクロールすると、問題が明らかになります。ご覧のとおり、Chrome を除くすべてのブラウザは 2 余分なピクセルをカウントし、全体を台無しにします。
コンソールを開くと高さのログが表示され、他のブラウザと比較できます。

高さを設定するpxとspanすべてが正常に機能しますが、カスタム選択の利点は、それを多くのサイズに適応できることですem。また、フォントを設定してフォントemを変更しようとしましたが、何もしませんでした。

誰かがここで何が起こっているのか、そしてその理由を教えてもらえますか? それは私を夢中にさせています。 

scrollToItem: function() {
    // Select.sub.scrollTop(0);
    var idx = Select.items.find('.selected').parent().index(),
        height = Select.items.outerHeight(),
        items = Select.items.length,
        allHeight = height * items,
        curHeight = height * (items - idx);
    console.log(height);
    Select.sub.scrollTop(allHeight - curHeight);
},
4

1 に答える 1

3

これは、EM がブラウザーに基づいているためです。何らかの方法で変更を説明する以外に、これを回避する方法はありません。

Chrome では .3 EM = 5px と表示され、他のブラウザでは 6px と表示されます。高さを大きくしているのはパディングであり、パディングが EM であるため、高さが異なります。

于 2012-05-02T03:33:11.527 に答える