パーセントオフのWebkit

における1つの画素Iは、2つのdiv -elementsを有する、トップ一つ40％の高さと他方60％を有しています。私の例では、最初のものはtop: 0;に、次のものはbottom: 0;に位置付けました。私の問題は、ウェブキットでそれらの間に1pxの距離があることがあります。パーセントオフのWebkit

私はWebkitの中に問題が再現しjsFiddle作成（SafariとChromeを、しかし、Firefoxで正常に動作します。）している

http://jsfiddle.net/bVxDA/が

がこれは（アクションのバグを表示するには、ウィンドウのサイズを変更します）コードを使用しています。私はJavaScriptやjQueryのを使用するソリューションといいと思い

HTML

<div id="cover-top"></div> 
<div id="cover-bottom"></div>

CSS

html, body { 
    background: red; 
    height: 100%; 
} 

#cover-top, 
#cover-bottom { 
    background: #000; 
    position: absolute; 
    width: 100%; 
} 

#cover-top { 
    height: 40%; 
    top: 0; 
} 

#cover-bottom { 
    height: 60%; 
    bottom: 0; 
}

。

出典

2012-03-20 Filip

高さがhtml, bodyの場合、高さが奇数の場合は1pxの行「剰余」があります。

Webkitは1pxを分割できません。試しません。

を参照してください：あなたは次のように設定している場合1pxのラインを消すことができhttp://jsfiddle.net/iambriansreed/gPu3Y/

：

#cover-bottom { 
    height: auto; 
    top: 40%; 
    bottom: 0; 
}

出典

2012-03-20 15:58:47 iambriansreed

証明：http://jsfiddle.net/iambriansreed/gPu3Y/ – iambriansreed

これは、40％が全体の数ではありませんたびに発生します。あなたのページが98px高さであると仮定することができますので、我々が得る：

40％= 39,2px
60％= 58,8px

私たちは "半分" のピクセルを描画することはできませんので、、最初のdivは39pxの高さになり、2番目のdivは58pxになります。また、両方のdivが "重複"できないので、2番目のものは上から40px描画されます（最初のものは39,2pxの高さですので、39pxで描画を開始できません - 0.2pxオーバーラップします）。だから我々はそれらの間のこの非常に奇妙な "ギャップ"で終わる。

出典

2012-03-20 16:03:00 oezi

だけ<html>要素の高さが

http://jsfiddle.net/bVxDA/4/

奇数の場合、それは（私はフィル動作を確認するために、背景色を変更）事項をしません

#cover-bottom { 
    top: 40%; 
    bottom: 0; 
}

で最後のルールを変更します

出典

2012-03-20 16:03:17 fcalderan

なぜdownvote？それは問題を解決していないのですか？ – fcalderan

答えて

関連する問題