2009 2009年 7月 27

ユーザーエージェントのスタイルシート:GoogleのChromeの謎の余白

昨日、他のすべての "グラウンドホッグデー"のように、私はいくつかのCSS /テーブルレスレイアウトで働いていた。 すべてのIE 7、FF 3、Chromeでうまくいったが、刚性は突然、私はGoogle Chromeで見られるいくつかの非無視マージンを見ました。 非常に奇妙なworringかかわらず、それは私がaccrossに来たことをいくつかの新しいバグ/問題でした、私の平凡な仕​​事のいくつかのスパイスは、最終的にあった。 悲しい(しかし素晴らしい)は、プローブの数分以内に修正されました...

Google Chromeは私のCSSをリセットし(:0pxマージン)は無視のような基本的に、それは見えた。 それは実際にユーザーエージェントのスタイルシート(-webkitの-パディング-スタート:40px)によって引き起こされた。 0ふらちな要素:だから解決策は、パディングを設定することにより、このスタイルをリセットすることであった。
任意の要素に起きてからこの問題を回避する良い方法は、次のようにグローバルなCSSレストを使用することです

* {マージン:0;パディング:0;}

ユーザーエージェントのスタイルシート(仕様)とは何ですか?
次の抜粋は、から取られhttp://meiert.com/en/blog/20070922/user-agent-style-sheets/ 、ユーザーエージェントのスタイルシートの詳細を読むためにリンクをたどる

しかしおそらく平凡な - - 方法CSS 1は、各ユーザーエージェント(UA、しばしば "Webブラウザ"または "Webクライアントは ')合理的にドキュメントを提示するデフォルトのスタイルシートを持っていることを示すことによってアイデアを紹介しています。 CSS 2は、適合するユーザエージェントは、デフォルトのスタイルシートを適用する必要があります(または、彼らがしたかのように動作)とユーザエージェントのデフォルトスタイルシート言語の一般的なプレゼンテーションの期待を満たす方法で、文書言語の要素を提示しなければならないという。CSS 3は、同じ心である可能性があります。

CSSの仕様は、デフォルトの表示かどうかについては、 "本物の"スタイルシートを使用するかどうかを実装に任せているので、それはあなたがすべてのブラウザのインス​​トールフォルダのデフォルトのスタイルシートが見つからないという驚くべきではありません。 Microsoft社のInternet Explorerとは異なり、同様に例えばオペラ(と私が知る限り)、FirefoxやNetscape NavigatorなどのGeckoブラウザ( "html.css"の外観)だけでなく、Konquerorは、デフォルトのスタイルを理解することがなく、簡単に行えます。


2008 2 2008年 08月

XSLにDOCTYPEを設定する

先週私は、クライアントのプログレシブHTML / CSSのレイアウトを作成したIE6、IE7とFF 3でそれをテストし、完全に大丈夫だった...まで! レイアウトはmanufactingサイクルのさらに下行ってきました。 それに失敗しました。 HTMLレイアウトはそれに適用されるXSLとXMLに変換されたときにページレイアウトの要素だけであらゆる場所に行きました...がっかり!

私はこのSH **を修正する必要があります場合は、月曜日の朝の予想では、週末OK眠れませんでした。 しかし、今の状況、これらの種類(ブラウザの癖、私が意味する)を扱うにはほとんどexperinceを持って、私はそれがなくDOCTYPE他には何もしなければならなかった知っていた.... そしてそれは...

問題:
あなたの変換は明示的にデフォルトのDOCTYPEが含まれていますので、あなたは、DOCTYPEを制御したい、あなたのレイアウトはトスのために外となります。

ソリューション:
XSLTの仕様は、チョイスのDOCTYPEを設定するには、出力メソッドを提供します。 また、私達のUI開発者のために、興味のあるトピックは次のようになります。 HTML出力メソッドXML出力メソッド

よく! あなたが退屈する前に、ここで修正です。

例えば、あなたのHTMLのバージョンでは、次のDOCTYPEを持っている場合: -

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

その後、XSLには、次のものがなければならない: -

<xsl:output method="html" doctype-system="http://www.w3.org/TR/html4/loose.dtd" doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN" indent="yes" />

そして最後に! あなたのXSLTの出力は、選択したDOCTYPEに従うことを確認しないでください。


NDKホーム | ITを表現 | 表現口蓋 | Penmenshipを表現 | 表現する素晴らしい | 自分を表現