ホームページ  >  記事  >  ウェブフロントエンド  >  さまざまなブラウザでの DIV+CSS のパフォーマンス_html/css_WEB-ITnose

さまざまなブラウザでの DIV+CSS のパフォーマンス_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:55:091056ブラウズ

??

DIV+CSS を社員に教える過程で、私が思いつかなかった質問もたくさん出たので、時間をかけて自分で実験をしました。 IE7 と Firefox で実行中:
実験 1. div がボーダー属性を指定していない場合、この div はブラウザーにボーダーを持ちますか?
結果: IE7: いいえ。 Firefox: いいえ。
実験 2: div が境界線属性の太さの値のみを指定している場合、この div はブラウザーに境界線を持ちますか?
結果: IE7: いいえ。 Firefox: いいえ。
実験 3: div が境界線属性の太さの値を指定し、境界線属性の色の値も指定している場合、この div はブラウザーに境界線を持ちますか?
結果: IE7: いいえ Firefox: いいえ。
実験 4: div が境界線属性の太さの値とスタイルのみを指定している場合、この div はブラウザーに境界線を持ちますか?
結果: IE7: はい、デフォルトの色は黒です。 Firefox: はい、デフォルトの色は黒です。
実験 5: div がボーダー属性のスタイルのみを指定している場合、この div はブラウザーにボーダーを持ちますか?
結果: IE7: はい、デフォルトの色は黒です。 Firefox: はい、デフォルトの色は黒です。
実験 6. div で幅と高さが指定されていない場合、ブラウザでは div はどのような形で表示されますか?
結果: IE7: 幅は 100%、高さは 0; Firefox: 幅は 100%、高さは 0。
実験 7. div の幅が指定されているが高さが指定されていない場合、div はブラウザーでどのような形で表示されますか?
結果: IE7: 一定の高さ; Firefox: 高さは 0;
実験 8、親子関係を持つ 2 つの div。 CSS コードは次のとおりです:
#father{
border:solid red 1px;
width:100px;
#son
{
margin-right:100px; width:100 %;
}
それでは、ブラウザでの父親の実際の幅はどれくらいでしょうか?
結果: IE7: 幅は 100px; Firefox: 幅は 100px;
実験 9. div がページ上での配置を指定しない場合、ページ上での位置はどうなるでしょうか?
結果: IE7: 左揃え、Firefox: 左揃え。
実験 10. 2 つの親子関係 div、#father、#son を、father に text-align=center を指定した場合、son はブラウザ内でどのような位置になるでしょうか。
結果: IE7: 父親に対して中央揃え; Firefox: 父親に対して左揃え。
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。