0

makeppのWebサイトは、ヘッダーと狭いナビゲーションを備えたシンプルな3ペインのレイアウトで、通常は左にフロートします(ただし、最初の<li>の↔ボタンをクリックして右にフロートするか、×で非表示にしてナローに対応します。画面):

+------------------------------+
+ div id="_head"               |
+ width: 100%                  |
+-------------+----------------+
+ ul          | div id="_main" |
+ width: 10em | width: auto    |
+-------------+----------------+
+ clear: both                  |
+------------------------------+

このページは検証します(schema.orgで遊んでいるものを除く)。iPhone /パッドを除いて、すべてのブラウザが正しく表示します。そこで、右側に小さな文字と役に立たない白い帯が表示されます(おそらくulと同じくらい広い???)。

今、私はこのiPhoneのバグに遭遇した人が何人かいて、min-width 100%のような解決策は機能していないようです。また、アップル固有のメタヘッダーはグロテスクです。 IE6..。

Appleの店で、MacOSのサファリもこれに悩まされていることがわかりましたが、白い帯を窓の外に出すには十分です。横にスクロールして見る必要があります。なんとかfirebugをダウンロードできましたが、どういうわけか、どのDOM部分にも属していないように見えるこの白い領域を認識していません。

それ以来、Androidにも同じことが当てはまることがわかりました。右にスクロールすると、この空の領域が表示されます。そして(今だけ?)Chromium20もそうです。これは、ローカルでデバッグできることを意味するので、スケッチの4つの要素のそれぞれに赤い背景を配置しました。白い帯には何も届きませんでした。

しかし、それを追加するhtml{background-color:red;width:100%;min-width:100%;max-width:100%;}と、バンドは赤になり、幅は無視されます。

それで、このページをどこでも正しくするためのクリーンな解決策は何ですか?

4

1 に答える 1

0

わかりました、私は間違った場所を探していました。横に並んだ _main と ul は、左右にフロートしたり、ボタンで閉じることができますが、うまくいくのが困難でした。私はなんとなくそれが犯人だと思いました。

しかし今、私はまったく別の問題を発見しました: ヘッダーのタブは css スプライトであり、iPhone/iPad には rect クリッピングのバグがあります。彼らは光学的に正しく取得しますが、舞台裏では全体のサイズを計算するためにまだクリップされていない画像を使用しています<html>. そして、結合されたスプライトは、これまでにぴったりと表示される部分よりも幅が広いため、ファントムが突き出ていました. スプライトを 2 行に並べ替えましたが、問題ありません。

(Webkit は、バグを説明するために時間を割くために登録が必要なもう 1 つのサイトです。面倒です! ここからこれを取得したい場合は、makepp upto 2.0.98.2をダウンロードしてインストールすることで再現できます。)

于 2012-12-31T15:30:48.233 に答える