2

http://jsfiddle.net/NgdUR/

基本的に、境界線で作成されたCSS三角形を使用して、上向き矢印と下向き矢印の両方を持つカスタム選択ボックスを作成します。

これを Opera、Chrome、Safari で確認すると問題なく動作しますが、Firefox では after 疑似要素に余分なピクセル (または before に 1 つ少ないピクセル) があります。

背景色を保持するように疑似要素を変更すると、配置の問題はありません: http://jsfiddle.net/NgdUR/1/

何か案は？

編集：Firefoxの画像、

ここに画像の説明を入力

他のブラウザでの見え方:

ここに画像の説明を入力

ありがとう

/ジャイ

4

3 に答える 3

1

高さと幅を 1px 追加し、各疑似要素の境界線の幅を 2px に変更しました。Firefox、IE9、および Chrome で機能します。IE8 と Opera 11+ は少し分厚いように見えます。

更新されたフィドル

.test {
    position:relative;
    background:#ccc;
    border:1px solid #aaa;
    box-shadow:#aaa 0 0 4px;
    display:block;
    height:26px;
    width:28px;
   }
.test:before,
.test:after {
    content:"";
    border:2px solid transparent;
    width:1px;
    height:1px;
    display:block;
    position:absolute;
    left:11px;
}
.test:before {
    border-bottom:3px solid #000;
    top:6px;
}
.test:after {
    border-top:3px solid #000;
    top:14px;
}​
于 2012-04-07T01:20:50.567 に答える
0

ええと... 数年後、まだ同じ問題: Firefox (現時点ではバージョン 45 について言えば) に :before または :after を使用して何かを伝え、太い三角形の境界線を持つゲームを伝えた場合、彼はまだ幅と高さを誤って計算していますそれらの要素を最大 1 ピクセルずつランダムに。これは、すべてのインスタンスの半分で矢印の頭と尾が本体から分離されると、特に流れるように反応するレイアウトのコンテキストで、見苦しい視覚的な不快感を与えます.

私のプロジェクトの 1 つでそれらを修正する必要があり、この記事に出くわしました。しかし、実際には箱から出してすぐには役に立ちませんでした。むしろ、まったく別の方法を試すという考えを与えました。

私の場合、確実に役に立ったのは次のとおりです。

  1. 三角形の box-sizing を border-box に設定します
  2. 三角形の内側の内容 (幅/高さ) のサイズを 0 にする
  3. 外側のボーダーボックスに三角形の正確なサイズを指定します

比較的単純ですが、Firefox にとって、彼をルールに服従させる唯一の方法です。Chrome では、どのサイジング方法でも問題はありませんでした。Opera は、Chrome のクローンであるにもかかわらず、驚くべきことに Firefox と同じ道化を示しましたが、同じテイムも示しました。

于 2016-04-27T13:36:17.350 に答える
0

これはFF11で私のためにそれを修正します:

.test {
    position:relative;
    background:#ccc;
    border:1px solid #aaa;
    box-shadow:#aaa 0 0 4px;
    display:block;
    height:26px;
    width:28px;
   }
.test:before {
    content:"";
    border:3px solid transparent;
    border-bottom:3px solid #000;
    width:0;
    height:0;
    display:inline-block;
    position:absolute;
    top:6px;
    left:11px;
}
.test:after {
    content:"";
    border:3px solid transparent;
    border-top:3px solid #000;
    width:0;
    height:0;
    display:inline-block;
    position:absolute;
    top:14px;
    left:10px;
}
于 2012-04-07T00:55:13.007 に答える