0

私は小さな写真スライダーに取り組んできました。ChromeとFFでは見た目が少し違うので、CSSをリセットすると両方とも同じように見えると思いました。Yahoo!を使用しました YUI CSSはモデルをリセットしましたが、何も変更されていません。FFでは見栄えがしますが、Chromeでは右側の[再開]ボタンが高すぎて、大きな画像の下部にある細い灰色の線がメインボタンのある場所で途切れます。URLは次のとおりです。

http://www.replayground.com/slider/02.html

円の下のものは無視してかまいません。そこにあるものをテストするだけです。

02.htmlファイルに追加したものは次のとおりです。

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">

CSSリセットを正しく機能させる方法についてのアドバイスが本当に欲しいです。あなたが見る特定のボタンの問題を修正する方法ではありません。ページに要素を追加するので、毎回これを実行する必要はありません。

4

2 に答える 2

3

CSSリセットは、残りのすべてのCSSクロスブラウザを作成するようには設計されていません。これは、すべての異なるブラウザーのすべてのクライアントのデフォルトルールを同じものに設定するように設計されているため、常に予測可能なCSSルールのセットから作業できます。ブラウザがこれらのルールをどのように解釈するかは、依然としてそれぞれに固有です。

あなたの場合でも、ChromeとFFの両方で同じように動作するCSSルールを作成する方法を理解する必要があります-リセットは単に開始点を少し平準化するだけで、ブラウザのレンダリングの違いを取り除くことはありません。

クロスブラウザCSSフレームワーク（例：blueprintcss.orgまたは960.gs）が現在の状況に役立つ場合があります。多くの場合、リセットを使用しますが、リセット後のCSSルールのレンダリングの違いを補正するルールもあります。

于 2011-10-14T20:55:10.323 に答える
1

jballはリセットについて非常に正しいです。空白のページから始めることができますが、適切で一貫性のある結果を得るには、適切なドキュメント構造と適切なCSSを作成する必要があります。

あなたの場合、あなたのページのすべての要素はページ内で緩んでいます。これは最終的にあなたに問題を与えるでしょう。特にすべてのアイテムに正確な高さを指定しない場合、いくつかのことが数ピクセルシフトします。フォントは、ブラウザごとに異なる高さでレンダリングされます。これらは10分の1のピクセルである可能性がありますが、それらが丸められると、Webサイトはブラウザー間で少しずれます。

要素のネストをもう少し深く使用すると、ポジショニング要素（相対および絶対）をより有効に活用できます。ヘッダーに特定のdivを配置し、それに固定サイズを指定すると、各要素を非常に正確に配置できます。これは、ヘッダーやメニューに特に便利です。

私は自由に小さな例を作成しました。これは、ポジショニングの基本を示しています。完璧ではなく、レイアウトに画像の代わりに明るい色の境界線を使用します。ただし、これは、要素のネストと絶対位置および相対位置を、負のマージントリックとともに表示するためだけのものです。 http://jsfiddle.net/YwCxQ/3/

于 2011-10-14T21:24:30.910 に答える