4

私たちの企業のウェブサイトは、いくつかの奇妙な悪ふざけを経験しています. デスクトップPCまたはラップトップで表示すると、どのブラウザでも問題なく表示されます。ただし、モバイル デバイスで Web サイトを閲覧すると、iOS と Chrome の Safari と Android の Android 2.2 Stock Browser の両方でページ要素の周りにこれらの境界線が表示されます。

問題を調査しているときに、境界線がデスクトップ/ラップトップの Chrome でも表示されることに気付きましたが、特定のズーム レベルでのみ表示されます。

100% ズーム:

100パーセント

110% ズーム:

110パーセント

奇妙なことに、線はさまざまなズーム レベルで一貫していません。

90パーセント

これは 90% ズームで撮影されています。

明確にするために、ラップトップ/デスクトップの Google Chrome でズームすることで、モバイル デバイスで発生している問題を再現できます。しかし、モバイル デバイスで Web サイトを読み込むと、ズーム レベルに関係なく、常に線が表示されます。

Web サイト全体のレイアウトは表を介して与えられます (はい、わかっています... これは Typo3 のテンプレートとして何年も前に作成されたものであり、小さな変更を加えることはできますが、テンプレート全体を再構築することはオプションではありません。しかし、これは余談ですが、テーブルのCSSルールと関係があるのではないかと思っていましたが、特に問題はないようです。それが CSS の問題であるとすれば、さまざまなズーム レベルで線が一貫しているのではないでしょうか? これはテンプレートの CSS ファイルです: Pastebin

いずれにせよ、何が問題を引き起こしているのかわからず、私たちはこれに少し行き詰まっています. 誰かがこのようなことに遭遇したことがある場合は、この問題に関する啓発をいただければ幸いです。ありがとう。

編集: デスクトップの IE、Firefox、および Safari でこれをテストしました。ズーム レベルに関係なく、境界線はありません。

編集 2: 500% にズームすると (デスクトップ上の Chrome)、ウェブサイトの配色に従って、一部の線が青、一部が白、一部が灰色であることがわかります。また、長さが等しくなく、Web ページをスクロールすると位置が変わるようです (つまり、もう少し左/右に移動します)。

4

1 に答える 1

1

これは、iPhone/iPad で表示した場合の Web サイトの div 間のスペース/ギャップに似ています(「iPad では、Web サイトを 100% 未満の縮尺で表示すると、いくつかのアーティファクトが表示されることがあります。そのうちの 1 つは特に目立ちます: 間の 1 ピクセルの線です。あなたのサイトと同じように、メニューの下の div")

その答えの解決策は、次のいずれかを示唆しています。

  • ズームを無効にする (特定のサイズで表示するように設計されている場合)
  • 要素に 1 ピクセルのオーバーラップを持たせる (例: マージン: -1 ピクセル)

オーバーラップの修正は過去にうまくいきましたが、これはテーブルベースのレイアウトでは難しいかもしれません.

于 2013-01-15T13:07:52.777 に答える