css - iPad ビューでページが異なって見える - CSS の問題

Question

このページを iPad で開くと問題が発生します。真紅色の上部識別ヘッダーが左側に移動し、右側に空白スペースが表示されます。Safari を含む他のすべての主要なブラウザーは、iPad を除き、本来あるべきページを表示します。これはiPad ビューのスクリーン ショットです。何が問題なのですか？

Answer 1

The content in your #signature div is bigger than your #signature div, so the background isn't stretching to fit the content (you can get the same reaction by shrinking the size of your window and scrolling to the left or right).

Fixes:

• Remove left: -5px; from #signature a.iu
• Add background: #7D110C to #signature
• Change right: 0 on #signature form to right: 5px.

That should straighten things up.

EDIT

Here's what your updated styles should look like.

#identity #signature {
    height: 44px;
    margin: 0 auto;
    position: relative;
    text-align: left;
    width: 990px;
    background: #7D110C;
}

#identity #signature a.iu {
    background: url(pw_files/img/iu_crimson.gif) no-repeat 20px 0;
    display: block;
    height: 44px;
    position: relative;
    top: 0;
    width: 250px;
}

#identity form {
    height: 44px;
    position: absolute;
    right: 5px;
    top: 0;
}

I pulled these styles out of screen.css