本篇文章来给大家谈谈 CSS zoom 属性, 介绍一下 CSS zoom 属性的作用. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
这里介绍一下 CSS 中的 Zoom 属性, 这个属性一般不为人知, 甚至有些 CSS 手册中都查询不到. 但经常会在一些 CSS 样式中看到它出现.
Zoom 属性是 IE 浏览器的专有属性, Firefox 等浏览器不支持. 它可以设置或检索对象的缩放比例. 除此之外, 它还有其他一些小作用, 比如触发 IE 的 hasLayout 属性, 清除浮动, 清除 margin 的重叠等.
zoom 版本: IE5.5 + 专有属性 继承性: 无
语法:
zoom : normal | number
参数:
normal : 使用对象的实际尺寸
number : 百分数 | 无符号浮点实数. 浮点实数值为 1.0 或百分数为 100% 时相当于此属性的 normal 值
说明:
CSS 中 zoom:1 的作用
兼容 IE6,IE7,IE8 浏览器, 经常会遇到一些问题, 可以使用 zoom:1 来解决, 有如下作用:
触发 IE 浏览器的 haslayout
解决 IE 下的浮动, margin 重叠等一些问题.
比如, 使用 p 做一行两列显示,
html 代码:
- <div class="h_mainbox">
- <h2>
- 推荐文章
- </h2>
- <ul class="mainlist">
- <li>
- <a href="#" style="color:#0000FF" target="_blank">
- 测试一
- </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 样式名字那里就可以在 IE6,IE7,IE8 正常显示效果了.
CSS 中的 zoom 的作用
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
来源: http://www.css88.com/web/css/17436.html