cari

zoom属性详解

Mar 01, 2021 pm 02:16 PM

zoom属性是ie专有属性,除了设置或者检索对象的缩放比例之外,它还有可以触发ie的haslayout属性、清除浮动、清除margin重叠等作用。

zoom属性详解

本文操作环境:Windows7系统,CSS3版本,Dell G3电脑。

css的zoom属性

zoom这个属性是ie专有属性,除了设置或者检索对象的缩放比例之外,它还有可以触发ie的haslayout属性,清除浮动,清除margin重叠等作用。 不过值得注意的一点就是火狐浏览器不支持zoom属性,但是在webkit内核浏览器中zoom这个属性也是可以被支持的。

    (1)下面我们来看下zoom在非IE浏览器中的作用:看下面的例子,我是在谷歌浏览器下访问的,在该例子中zoom的作用是放大为原来的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>

以上代码的结果如图:

f59dda0a1ce530cab35b22e4651ce54.png

【推荐学习: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>

结果截图如下:

f41a9278cd7d3c436816f0049c0cb11.png

注意:zoom在非IE浏览器中表现为支持放大或者缩小,但是由于这个属性是一个不标准的css属性,因此一般在非IE浏览器中不用zoom来实现div 的缩放效果,现在要放大或者缩小直接用css3的transform属性。

   (2)看完了zoom在非IE浏览器中的表现之后,我们就该看看这个属性在IE浏览器中的作用了。

Zoom的使用方法: 

zoom : normal | number

normal :  默认值。使用对象的实际尺寸 

number :  百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的 normal 值用白话讲解就是zoom:后面的数字即放大的倍数,可以是数值,也可以是百分比。如:zoom:1,zoom:120%。而这个属性只要在IE中才起作用,所以很少用到它的实际用途,而最经常用到作用是清除浮动等,如: 

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

_zoom是CSS hack中专对IE6起作用的部分。IE6浏览器会执行zoom:1表示对象的缩放比例,但这里 

overflow:hidden;和_zoom:1;是连起来用的,作用是清除border内部浮动。 

 同理,还可以使用同样方法清除margin属性在IE浏览器中的重叠问题:这就要提到zoom属性在IE中的第二个作用了,即

 兼容IE6、IE7、IE8浏览器,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用: 

(2)触发IE浏览器的haslayout ,解决ie下的浮动,margin重叠等一些问题。 

比如,本站使用DIV做一行两列显示,HTML代码: 

<div class="h_mainbox">   
<h2>推荐文章</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)下面是zoom属性在IE浏览器中常见作用总结,希望对今后在使用这个属性时有所帮助:

1、检查页面的标签是否闭合 

不要小看这条,也许折腾了你两天都没有解决的 CSS BUG 问题,却仅仅源于这里。毕竟页面的模板一般都是由开发来嵌套的,而他们很容易犯此类问题。 

快捷提示:可以用 Dreamweaver 打开文件检查,一般没有闭合的标签,会黄色背景高亮。 

  2、样式排除法 

有些复杂的页面也许加载了 N 个外链 CSS 文件,那么逐个删除 CSS 文件,找到 BUG 触发的具体 CSS 文件,缩小锁定的范围。 

  对于刚才锁定的问题 CSS 样式文件,逐行删除具体的样式定义,定位到具体的触发样式定义,甚至是具体的触发样式属性。 

  3、模块确认法 

有时候我们也可以从页面的 HTML 元素出发。删除页面中不同的 HTML 模块,寻找到触发问题的 HTML 模块。 

  4、检查是否清除浮动 

其实有不少的 CSS BUG 问题是因为没有清除浮动造成的。养成良好的清除浮动的习惯是必要的,推荐使用 无额外 HTML 标签的清除浮动的方法(尽量避免使用 overflow:hidden;zoom:1 的类似方法来清除浮动,会有太多的限制性)。 

  5、检查 IE 下是否触发 haslayout 

很多的 IE 下复杂 CSS BUG 都与 IE 特有的 haslayout 息息相关。熟悉和理解 haslayout 对于处理复杂的 CSS BUG 会事半功倍。推荐阅读 old9 翻译的 《On having layout》(如果无法翻越穿越伟大的 GFW,可阅读 蓝色上的转帖 ) 

快捷提示:如果触发了 haslayout,IE 的调试工具 IE Developer Toolbar 中的属性中将会显示 haslayout 值为 -1。 

  6、边框背景调试法 

故名思议就是给元素设置显眼的边框或者背景(一般黑色或红色),进行调试。此方法是最常用的调试 CSS BUG 的方法之一,对于复杂 BUG 依旧适用。经济实惠还环保^^ 

最后想强调一点的是,养成良好的书写习惯,减少额外标签,尽量语义,符合标准,其实可以为我们减少很多额外的复杂 CSS BUG,更多的时候其实是我们自己给自己制造了麻烦。

要说的暂时就这么多,以上如有纰漏还请各位大神多多指教。

Atas ialah kandungan terperinci zoom属性详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Begitu banyak pautan warnaBegitu banyak pautan warnaApr 13, 2025 am 11:36 AM

Di sana ' s telah menjalankan alat, artikel, dan sumber tentang warna akhir -akhir ini. Tolong izinkan saya menutup beberapa tab dengan membulatkannya di sini untuk keseronokan anda.

Bagaimana margin automatik berfungsi di flexboxBagaimana margin automatik berfungsi di flexboxApr 13, 2025 am 11:35 AM

Robin telah menutupi ini sebelum ini, tetapi saya telah mendengar kekeliruan mengenainya dalam beberapa minggu yang lalu dan melihat orang lain menikam menerangkannya, dan saya mahu

Melangkah Rainbow Garis bawahMelangkah Rainbow Garis bawahApr 13, 2025 am 11:27 AM

Saya sangat suka reka bentuk tapak sandwic. Di antara banyak ciri yang indah ialah tajuk utama ini dengan garis bawah Rainbow yang bergerak ketika anda menatal. Ia ' s tidak

Tahun Baru, pekerjaan baru? Let ' s membuat resume berkuasa grid!Tahun Baru, pekerjaan baru? Let ' s membuat resume berkuasa grid!Apr 13, 2025 am 11:26 AM

Banyak reka bentuk resume yang popular membuat sebahagian besar ruang halaman yang tersedia dengan meletakkan bahagian dalam bentuk grid. Mari kita gunakan grid CSS untuk membuat susun atur yang

Salah satu cara untuk memecahkan pengguna dari kebiasaan tambah nilai terlalu banyakSalah satu cara untuk memecahkan pengguna dari kebiasaan tambah nilai terlalu banyakApr 13, 2025 am 11:25 AM

Tambah nilai halaman adalah satu perkara. Kadang -kadang kita menyegarkan halaman apabila kita fikir ia tidak bertindak balas, atau percaya bahawa kandungan baru tersedia. Kadang -kadang kita hanya marah

Reka bentuk yang didorong oleh domain dengan ReactReka bentuk yang didorong oleh domain dengan ReactApr 13, 2025 am 11:22 AM

Terdapat panduan yang sangat sedikit tentang cara mengatur aplikasi front-end di dunia React. (Hanya gerakkan fail sehingga ia "terasa betul," lol). Kebenaran

Mengesan pengguna yang tidak aktifMengesan pengguna yang tidak aktifApr 13, 2025 am 11:08 AM

Kebanyakan masa anda tidak benar -benar peduli sama ada pengguna secara aktif terlibat atau tidak aktif sementara pada aplikasi anda. Tidak aktif, makna, mungkin mereka

Wufoo ZapierWufoo ZapierApr 13, 2025 am 11:02 AM

Wufoo sentiasa hebat dengan integrasi. Mereka mempunyai integrasi dengan aplikasi tertentu, seperti Monitor Kempen, MailChimp, dan TypeKit, tetapi mereka juga

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Alat panas

Muat turun versi mac editor Atom

Muat turun versi mac editor Atom

Editor sumber terbuka yang paling popular

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.

PhpStorm versi Mac

PhpStorm versi Mac

Alat pembangunan bersepadu PHP profesional terkini (2018.2.1).

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

mPDF

mPDF

mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),