13

行で 829 ピクセルを占めるコンテナーがあり、同じサイズの背景画像があります。

そのコンテナ内に、829px コンテナに基づいて幅を計算する div があります。Safari では、div の幅は 173.8px のようになりますが、Safari/Webkit では切り捨てられるため、切り捨てられて幅が 173px になります。

この 829px コンテナには、同じ行にインラインで 3 つの div があります。最初の div では 1px が失われ、2 番目では 2px が失われ、3 番目では 3 ピクセルが失われるため、3 番目の div は 3 ピクセル左にシフトされます。iPad では、6 ピクセルが失われます。

サブピクセル レンダリングの問題を検索しようとしましたが、john resigs の記事とその他の SO の質問を読みましたが、解決策が見つかりませんでした。

Google で次の記事を見つけました: http://www.pixafy.com/blog/2013/05/css-subpixel-rendering/#more-310 自分の状況に適用しようとしましたが、そうしないとうまくいかないコンテナ 829px で計算された幅を設定します。

私に何ができる？

4

6 に答える 6

3

最近では、これを処理するためにflexbox (純粋な CSS) を使用できます。

上にリンクされたソースから：

フレックス レイアウトの背後にある主なアイデアは、コンテナーがアイテムの幅/高さ (および順序) を変更して、使用可能なスペースを最適に埋める機能を提供することです (ほとんどの場合、すべての種類のディスプレイ デバイスと画面サイズに対応するため)。フレックス コンテナーは、項目を拡張して利用可能な空き領域を埋めるか、縮小してオーバーフローを防ぎます。

于 2015-11-30T01:45:44.863 に答える
1

最近、Bootstrap フレームワークを使用しているときにこの問題に遭遇しました。ネットをトロールした後、このリンクhttp://cruft.io/posts/percentage-calculations-in-ie/を見つけ、いくつかのデバイス テストを行いました。iOS7 Safari は最も近い整数に切り捨てられているようですが、iOS8 (デフォルトでサブピクセル レンダリングがオンになっています) はわずかに最大値に切り上げられているようです。小数点以下15桁まで。これは、OSX 10.10 (Yosemite) でも同じようです。

Nils K が回答で言及しているように、ピクセル幅のレイアウトを使用するか、レイアウトを調整して、ピクセル全体をスペースに収めるのに十分な幅/狭さを確保してください。

于 2015-02-04T16:18:41.807 に答える
0

これが奇数の画像セット (たとえば 3 つの垂直スライダー) があるスライダーに関連している場合、小さなハックの 1 つは、中央の画像の幅を 101% に増やすことです。

.middle-slider img { width: 101%; }

ブラウザによるこの誤った処理に関して言えば、これはそこにあるハッキングの山の中で穏やかに受け入れられる唯一の解決策であり、ほとんどのユースケースで十分です.

于 2015-03-27T10:30:39.147 に答える
0

float: right背景色が明らかになったなどの理由で「行」の最後の要素を処理できない場合は、次のトリックを使用して背景を本当にハックに非表示にすることができます (これは SASS コードであることに注意してください)。

.safari .parent_element { // CHANGE
  position: relative;

  &:after {
    content: ''
    position: absolute;
    height: 100%;
    width: 3px;
    top: 0;
    left: calc(100% - 2px); // Or sometimes 'right: 2px;' will work
    background-color: $pageBackground; // Change
  }
}

<html>Modernizr テストを使用して、safari クラスが追加されます。

Modernizr.addTest('safari', function() {
  var uagent = navigator.userAgent.toLowerCase();

  return /safari/.test(uagent) && !/chrome/.test(uagent);
});

私がこのテストを使用した唯一の理由は、Safari のサブピクセル レンダリングを克服するためで、幅がパーセンテージのグリッド アイテム間でバックグラウンド グラデーションが実行されます。私はそれが広く使われることを主張しているわけではありません! ただし、これは有効な最終手段です。

于 2014-07-03T19:31:56.353 に答える
-1

同様の問題に直面したばかりで、ここで解決方法について書きました：http://maxlapides.com/fixing-subpixel-layout-rendering-in-safari/

基本的に、項目の幅を再計算してコンテナーの全幅にまたがるようにする JavaScript を考え出しました。

于 2013-12-27T17:51:53.560 に答える