モバイルSafari（iPad）の背景画像レンダリング

Question

Mobile SafariとiOSを使用して自分のウェブページを閲覧すると、予期しない単純なレンダリングの問題が発生します。

基本的に私のページにはタブがあり、3つのdivとタブの中央のdiv内に "a href"で構成されています。サイドのdivには背景が含まれ、中央にはリンクがイメージを持っています。何らかの理由で、モバイルSafariの上のhrefディスプレイ横の黄色の線の背景：

http://i.stack.imgur.com/jlKHf.jpg

は、デスクトップブラウザ上でそれが正常に動作している間：

を別のリンクを追加することができませんでした[、それはする必要があります白い]

.TabPanelLinks_true { 
    background: url(".../seltab-center.jpg") repeat-x scroll 0 0 transparent; 
} 

.TabPanelElement a { 
    color: #5C5C5C; 
    cursor: pointer; 
    display: block; 
    font-family: arial,helvetica,clean,sans-serif; 
    font-size: 11px; 
    font-weight: normal; 
    line-height: 22px; 
    margin: 0; 
    padding: 0 5px; 
    text-align: center; 
    text-decoration: none; 
} 

私は別の画像で試しましたが、成功しませんでした。私はセンターのdivに背景を追加しようとしましたが、成功しませんでした。何が起きているのか？

ありがとうございます。

Answer 1

私はiPadを持っていないので、これを試す方法がありましたが、border : none;と指定することもできますか？

left : 0とright : 0に絶対配置された画像として、タブの「終わり」で1つのdivを試すことができます...別の方法でも違うように見えるが、問題は解決する可能性がありますか？タブグラフィックス上に透明な背景が必要な場合は、divの外に画像を配置し、それに応じて余白/余白を調整することができます。

Answer 2

これは、正しくマスクされていないバックグラウンドレイヤー、または少なくともそれが私の問題だったと思います。お互いの上に重ね合わせた複数の背景がある場合に起こるようです。

Single/sub pixel misalignment of divs on ipad and iphone safari

そのスレッドの誰かのアドバイスに続いて、私は奇妙なラインを取得し、それはそれを修正しましたdiv要素にこの

border: 1px solid transparent; 

を追加しました。