ズーム属性の詳しい説明-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

ズーム属性の詳しい説明

藏色散人

Mar 01, 2021 pm 02:16 PM

zoom 属性は IE 固有の属性です。オブジェクトのズーム率の設定または取得に加えて、IE の haslayout 属性、フロートのクリア、マージンのオーバーラップのクリアなどもトリガーできます。

ズーム属性の詳しい説明

#この記事の動作環境: Windows 7 システム、CSS3 バージョン、Dell G3 コンピューター。

css

zoom 属性は IE 専用で、オブジェクトのズーム率の設定や取得に加え、IE を起動できる haslayout も持っています。 . プロパティ、クリアフローティング、クリアマージンオーバーラップなどの機能。ただし、Firefox ブラウザはズーム属性をサポートしていませんが、webkit カーネルブラウザではズーム属性もサポートできることに注意してください。

(1) IE 以外のブラウザでのズームの役割を見てみましょう: 以下の例を見てください。私は Google Chrome でアクセスしました。この例では、ズームの役割はズームインすることです。元の 2 回 (読者はズーム操作を自分で試すことができます)

1.zoom:1

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8" />  
<style>  
    div{  
        width: 100px;  
        height: 100px;  
        border: 3px solid red;   
        zoom: 1;  
}  
</style>  
    </head>  
    <body>  
        <div>hello</div>  
    </body>  
<html>

上記のコードの結果は、図に示すとおりです。

[推奨学習: ズーム属性の詳しい説明 CSS ビデオチュートリアル

]

2.zoom: 2 は、元のサイズの 2 倍にズームインすることを意味します:

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8" />  
<style>  
    div{  
        width: 100px;  
        height: 100px;  
        border: 3px solid red;   
        zoom: 2;  
}  
</style>  
    </head>  
    <body>  
        <div>hello</div>  
    </body>  
<html>

結果のスクリーンショットは次のとおりです:

注: ズームは IE 以外のブラウザでのズームインまたはズームアウトをサポートしているように見えますが、この属性は非標準であるため、 css 属性、zoom は通常、IE 以外のブラウザでは使用されません。div のスケーリング効果を実現するには、css3 のtransform 属性を使用して直接ズームインまたはズームアウトする必要があります。ズーム属性の詳しい説明

(2) IE 以外のブラウザでのズームのパフォーマンスを確認した後、IE ブラウザでのこの属性の役割を確認する必要があります。

ズームの使用方法:

zoom : normal | number

normal: デフォルト値。オブジェクトの実際のサイズ

number : % | 符号なし浮動小数点実数を使用します。浮動小数点の実数値が 1.0 またはパーセンテージが 100% の場合、この属性の通常の値と等価です。専門用語での説明では、ズームです。次の数字は倍率であり、数値または割合。例: ズーム:1、ズーム:120%。この属性は IE でのみ機能するため、実際の目的はほとんど使用されません。最も一般的に使用される関数は、float などをクリアすることです。例:

.border{ 
border:1px solid #CCC; 
padding:2px; 
overflow:hidden; 
_zoom:1; 
}

_zoom は、IE6 用の CSS ハックです。機能部分です。 IE6 ブラウザは、zoom:1 を実行してオブジェクトのズーム率を示しますが、ここでは

overflow:hidden; と _zoom:1; を併用して境界線の内部フローティングをクリアします。

同様に、同じ方法を使用して、IE ブラウザのマージン属性の重複の問題を解決することもできます。これにより、IE のズーム属性の 2 番目の役割、つまり

# が表示されます。 ## IE6、IE7、IE8 ブラウザと互換性があるため、問題が発生することがよくありますが、zoom:1 を使用すると解決できます。次の機能があります:

(2) IE ブラウザの haslayout をトリガーするIE でのフローティング問題、マージンの重複などの問題を解決します。

たとえば、このサイトでは DIV を使用して 1 行 2 列を表示しています。HTML コード:

<div class="h_mainbox">   
<h2 id="推荐文章">推荐文章</h2>   
<ul class="mainlist">   
<li><a href="#" style="color:#0000FF" target="_blank">CSS库吧</a></li>   
<li><a href="#" style="color:#0000FF" target="_blank">原创< /a></li>   
</ul>   
</div>

CSS コード:

.h_mainbox { border:1px solid #dadada; padding:4px 15px; background:url(../mainbox_bg.gif) 0 1px repeat-x; margin-bottom:6px; overflow:hidden}   
.h_mainbox h2 { font-size:12px; height:30px; line-height:30px; border-bottom:1px solid #ccc; color:#555;}   
.h_mainbox h2 span { float:right; font-weight:normal;}   
.h_mainbox ul { padding:6px 0px; background:#fff;}   
.mainlist { overflow:auto; zoom:1;}   
.h_mainbox li { width:268px; float:left; height:24px; overflow:hidden; background:url(../icon3.gif) 0 6px no-repeat; padding:0px 5px 0px 18px; line-height:200%;}

.mainlist ここで、zoom:1 は IE6 にすることができます。、IE7、IE8では正常に表示されます。

(3) 以下は IE ブラウザのzoom属性の共通機能をまとめたもので、今後この属性を使用する際の参考になれば幸いです。ページのラベルは閉じられています

これを過小評価しないでください。もしかしたら、2 日間解決できなかった CSS バグの問題は、これに起因しているだけかもしれません。結局のところ、ページテンプレートは通常、開発者によってネストされており、そのような問題が簡単に発生する可能性があります。

簡単なヒント: Dreamweaver を使用してファイルを開いて確認できます。通常、閉じたタグがない場合、そのタグは黄色の背景で強調表示されます。

2. スタイルの除外方法

一部の複雑なページでは、N 個の外部リンク CSS ファイルが読み込まれ、CSS ファイルを 1 つずつ削除し、BUG によってトリガーされた特定の CSS ファイルを見つけて、ロックの範囲を狭めます。

ロックされたばかりの問題のある CSS スタイルファイルについては、特定のスタイル定義を 1 行ずつ削除し、特定のトリガースタイル定義、さらには特定のトリガースタイル属性を見つけます。

3. モジュールの確認方法

ページの HTML 要素から開始することもできます。ページ内のさまざまな HTML モジュールを削除し、問題の原因となっている HTML モジュールを見つけます。

4. float がクリアされているかどうかを確認する

実は、float がクリアされていないことが原因で発生する CSS BUG 問題は数多くあります。フロートをクリアする良い習慣を身に付ける必要があります。追加の HTML タグを使用せずにフロートをクリアする方法を使用することをお勧めします (フロートをクリアするために overflow:hidden;zoom:1 などの同様のメソッドを使用することは避けてください。これは制限が厳しすぎます) ）。

5. IE

で haslayout がトリガーされるかどうかを確認します。

IE の多くの複雑な CSS バグは、IE の独自の haslayout と密接に関連しています。 haslayout に慣れていて理解していれば、複雑な CSS バグを少ない労力で解決できるようになります。 old9 によって翻訳された「レイアウトを持つことについて」を読むことをお勧めします (素晴らしい GFW を越えられない場合は、青の再投稿を読むことができます)

クイックヒント: haslayout がトリガーされた場合、IE のデバッグツールIE 開発者ツールバーのプロパティでは、haslayout 値が -1 として表示されます。

6. 境界線と背景のデバッグ方法

名前のとおり、デバッグ用の要素に目立つ境界線または背景 (通常は黒または赤) を設定します。この方法は、CSS のバグをデバッグするために最も一般的に使用される方法の 1 つであり、複雑なバグにも引き続き適用できます。手頃な価格で環境に優しい^^

最後に強調したいのは、良い文章を書く習慣を身につけ、余分なタグを減らし、可能な限りセマンティックにし、標準に準拠することで、実際に余分に複雑な CSS を大幅に節約できるということです。バグ、その他私たちがそうするとき、私たちは実際に自分自身に問題を引き起こします。

今言えることは以上です。もし上記に間違いがあれば、アドバイスをお願いします。

以上がズーム属性の詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。