Webkit系ブラウザのウィンドウのサイズによって隙間が出来る

  • 投稿日:
  • by
  • カテゴリ:
このエントリーをはてなブックマークに追加

Webkit系ブラウザのウィンドウのサイズによって隙間が出来る

HONDA-BEAT.JPで以前から直そうと思いながら、そのままになっていた右側部分の1ピクセルの隙間(赤枠部分)を重い腰をあげてやっと直す気になった。

Webkit系ブラウザのウィンドウのサイズによって隙間が出来る

スタイルシートをちょっと直せば解決だろうと思い、スタイルシートを見直してみました。ところが特に問題なさそう。でも、隙間がある以上、どこかが間違っているはずと何度か確認。でも、やっぱりわからない。

「まぁ、いいや。とりあえずバックグラウンドの画像の幅を広げて隙間をわからないようにしてしまえ」と思い、ちょっとインチキを...。

ところが、それでも解決しない。複雑な事なんてなにもしてないのになぜ?しばらく考え込んで(1分くらいだけど)ふとある事を思い出し、ブラウザSafariのウィンドウの横幅を変えてみました。

すると案の定、Safariのウィンドウのサイズを変更している間は隙間が現れたり、消えたりを繰り返しました。Safari、Chrome、Opera、Firefoxそれぞれで確認しましたが、この現象が現れるのはSafariとChromeだけです。Mac OS環境のためIEは使っていないので確認してません。

Webkit系ブラウザのウィンドウのサイズによって隙間が出来る

SafariとChromeだけなのでWebkit系が抱えている問題かと...。Webkitだけの問題ではなく、HTML、CSSの書き方を含めた上での現象なのかもしれませんが...。

基本的にHTMLは2005年当時に書いたものがベースだから、余計なマークアップとかありそうだし、直すならシンプルなHTMLにするところからだな。