2011-01-16 22 views
1

firefoxで設定したときに私が見逃したクロム/サファリに、奇妙な垂直スペーシングのバグがあります。いくつかの垂直スペーシングルールがどちらか一方によって無視されているようです。私はコードを通過しましたが、紛失しています - 正しい方向へ私を指し示すことは非常に高く評価されます。Chrome/safariのHTMLレンダリングのバグは、Firefoxでよく見えます。

ウェブサイトには、子供たちに健康食べることの大切さを教える程度で、URLは次のとおりです。http://ourgrowingplace.us/

+1

子供の栄養に関するサイトで少し皮肉を感じるのは私だけではないと思うが、その名前に「成長する」という言葉がある。米国の子どもの肥満は、それが何であるか、そしてすべてです。犯行は意味しない、それはちょうど私をsnickerにしました。 – eyelidlessness

答えて

0

私はあなたが何を言ってるのか垂直間隔のルールを知っているが、間隔を設定するための適切な方法はありません要素の数はマージンです。

margin:top right bottom left; 
+0

クイックレスポンスのおかげで、バグインの言及は、クロム/サファリのすべてが明らかな理由がなくてもシフトアップしているようです。私は余裕を持ってこれを修正することができますが、Firefoxはそれを間違ってレンダリングします。 – Bob

+0

私は問題が原因で起こっていることを正確には分かりません。あなたのスタイルシートの外にあるように思われた唯一のものはこの小さなものでした:しかし、それは私の知識に何の問題も引き起こさないでしょう。ちなみにあなたのサイトは素晴らしく見えます。このような固定幅のレイアウトでは、絶対位置プロパティを使用したくないのですか?ところで、私はアレックが答えを持っていると思う。 –

+0

親切な言葉をありがとう。 W3Cのcssバリデーターは、これらの奇妙なことを指摘しています。私はどこから来たのか見なければなりません。レイアウトを修正するためにいくつかの再設計が必要になるようです。 – Bob

1

私はあなたが最初にあなたのページでは、DTDで使用される仕様に準拠していることを確認してください示唆、あなたが指定したアドレスのページが有効なXHTML 1.0過渡的ではない、またそれは、指定された文字セット(イソと一致しません88559-1)。これは、レンダリング結果が予測不可能であり、ブラウザによって異なることを意味します。

2

あなたがやろうとしているようにお互いに次のdivを配置したい場合は、floatを使用します。

#left { 
    float: left; 
    width: 100px; 
} 
#right { 
    float: right; 
    width: 50px; 
} 
.clear { 
    clear: both; 
}

私も.clearクラスを追加しました:ので、すべてのコンテンツを必ずフロートをクリアしますこれら2つのfloatの下に配置され、次のとおりです。

<div id="left">left content</div> 
<div id="right">right content</div> 
<div class="clear"></div> 

また、あなたは比較的位置要素にleft/right/top/bottomを使用することはできません。 position:absolute要素position:relative要素内に配置することによって、絶対配置要素でそれらを使用してください。この場合、あなたはこれを使用すべきではありません。

marginを使用して、特定の場所に要素を「プッシュ」しないようにしてください。今、あなたはそれを上に上げるために負のトップマージンを追加しています。しかし、あなたがそれをしているのなら、通常、別のレイアウト設定を試みる必要があるということです。

+0

'position:relative'の要素に対しては、絶対に' left'などを使用できます。エッジケースを除いてはそれほど有用ではありませんが、効果があります。ただし、 'position:static'要素には使用できません。これはデフォルトです。 – eyelidlessness

+0

はい、私は負のマージンを使用する必要性から非常に恥ずかしいです。これは、デザインの一部の変更により、私が前に使用したことのないzレベルを使用し始めることを余儀なくされ、混乱したように見えるからです。私はそれは賢い修正だと思ったが、明らかに家具を固定するためにチューインガムを使用することになります。 – Bob

関連する問題