1

通常、選択要素をクリックすると、選択したオプションがデフォルトで強調表示され、他のオプションにスクロールすると、強調表示がポインターに従います。何らかの理由で、すべての選択が壊れています。他のオプションにスクロールすると、ハイライトが元の選択されたオプションに戻り、外側のマージンにある要素の下に小さなハイライトが表示されます。オプションをクリックすると、ハイライトが別の場所に視覚的に表示されていても正常に機能し、選択されますが、何がこのように動作するのかわかりません。

問題の画像:

ここに画像の説明を入力

この例では、「人」が選択されたオプションであり、「クラブ」の上にポインターがあります。これは、何を選択しているかを伝えるのが非常に難しいことがわかります。これはChromeとFirefoxの両方で発生しており、IEでは、ドロップダウンが開くとすぐに別のオプションを選択することさえできません(すでに選択したものを選択します)。

私は修正を見つけるために何時間も閲覧してきましたが、見つけたのはこの質問だけで、クロムの同じ問題を具体的に説明しています。開いている（フォーカスされた）「選択」要素での非常に奇妙なChromeの動作

残念ながら、選択要素にJavaScriptをまったく使用していないため、これは役に立ちませんでした（問題が何であるかを理解しようとする一環として削除しました）。また、selected="true" をデフォルトの選択から削除し、::selection スタイリングが何らかの形で問題に関連している可能性を考慮しました。

これは壊れた選択の 1 つです (CSS の大部分はこの下にあり、上記の説明があります)。

select
{
    font-family: 'CabinSemiBold'; 
    font-size: 14px;
    border-radius:3px; 
    border: 1px solid #000;
    color:#000000; 
}

#reviewsort
{
    width: 110px;
    height:30px;
}

<div class="sitecontentwrapper" >
    <div class="sitecontentrow">
        ...
        <div class="sitecontentcell">
             <div class="nowrap inlineblock">
             ....(omitted "Sort By: " label)...
             <select name="reviewsort" id="reviewsort" class="inlineblock">
                 <option value="date">Date</option>
                 <option value="helpful">Most Helpful</option>
             </select>
             </div>
        </div>
        ....
    </div>
</div>

自動マージンを使用して物事が折り返され、中央に配置され、コンテンツが巨大なテーブル内にあるかのように扱われるため、画面サイズが変化するとコンテンツが移動するように設計されています。.inlineblock と .nowrap は、領域が折り返されるべきでない場合、または折り返されたときに一緒にとどまる必要がある場合に使用され、「セル」内の残りのコンテンツは必要に応じて「行」の高さを拡張して折り返されます。私はレスポンシブ デザインにかなり慣れていないので、レスポンシブ コンテンツのシフトを処理するためのより良い方法があると確信していますが、それは実際の問題ではありません。私が考えることができる他のすべてを試してみて、選択がどのように壊れているのか理解できないので、何らかの形で問題を引き起こしている場合に備えて、私は主にこれを含めています。

.sitecontentwrapper
{
    max-width:1400px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px 50px;
    position:relative;
    display:table;
    border:0px;
    height:100%;
    width:100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
.sitecontentrow
{
    display:table-row;
}

.sitecontentcell
{
    display:table-cell;
    vertical-align: top;
}

.nowrap
{
    white-space: nowrap;
}

.inlineblock
{
    display:inline-block;
    vertical-align:top;
    position: relative;
}

これのいずれかが選択を正しく機能させない理由を誰でも思いつくことができますか? または、動作を修正する方法の方向を教えてください。

編集:どうやら私がリンクした質問のフィドルの例は、一部の人々(私ではない)のクロムで適切に機能しているため、コードで何が起こっているかを説明するための視覚的な参照として削除し、代わりに画像を添付しました。これは非常に奇妙な問題なので、本当に役立つことを願っています

編集 2: 問題を発見し、以下の回答を追加して、質問を閉じることができます。ここに答えを残すだけではありません。

4

1 に答える 1

0

コンテンツが相対的に配置され、z インデックスがメニューなどのオーバーレイ コンテンツを作成するために使用されるため、絶対配置が適切に機能するようにするために最初に配置されたグローバル ラッパーに、漂遊した display:table タグがあったため、明らかに問題が発生していたことがわかりました。それらの下に適切に。したがって、絶対テーブル表示を行ってから、(z-index を使用して) 相対レベルでテーブルを再度表示し、選択を中断していたようです。また、最初にこのラッパーを使用する必要はないと確信しているため、おそらく戻っていくつかの方法を変更する必要があることもわかりますが、それを取り出すとjquery評価が壊れて星が発生します画像を一列に並べるのではなく、あちこちに挿入します。

うまくいけば、これが他の誰かが同じ失敗を繰り返さないようにするのに役立ちます. 問題がどこにあるかを絞り込むのに本当に役立ったので、コメントしてくれたすべての人に感謝します。

.sitewrapper
{
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
    position:absolute;
    top:0px;
    left:0px;
    border:0px;
    <display:table> <- stray tag that needed to be removed
}
于 2013-05-07T16:39:44.203 に答える