IE浏览器专有css属性之zoom详解

   2015-11-13 0
核心提示:Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动、清除margin的重叠等

zoom:1;一般是拿来解决IE6的子元素浮动时候父元素不随着自动扩大的问题,功能相当于overflow:auto,同样也可以用height:1%来代替zoom:1。

所以一般要在浮动元素的父元素加上overflow:auto;zoom:1; 。这样,子元素浮动,父元素再也不会不自动跟子元素扩大了。


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浏览器中的重叠问题。


PS:一直认为IE6应该从广大网民的电脑中删除或升级了,作为网页制作者,应该不再去为IE6、IE7这样的极品费脑筋,直接不兼容,让IE6用户不得不升级!

 
标签: IE Zoom
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • react-native ViewPagerAndroid 坑1
    ViewPagerAndroid组件 在更新新的data时 页面显示空解决办法  在data发生变化时 传入新的data的长度ViewPagerAndroidkey={this.props.children.length}style={{ flex: 1 }}onPageScroll={this.onPageScroll}onScrollBeginDrag={this._onScrollBegin}scrollEn
    03-08
  • 使用create-react-app构建的项目(并引入react-app-polyfill做IE兼容)在开发环境下的IE浏览器中报错的解决方案
    使用create-react-app构建的项目(并引入react-
    个人所负责的一个项目,需要兼容IE11,所以已经按照react-app-polyfill官方指定的方案进行兼容配置即在项目src/index.js中:// The first lines in src/index.jsimport 'react-app-polyfill/ie11';import 'react-app-polyfill/stable';// other codes并在pack
    03-08
  • React-Native之ViewPagerAndroid的使用
    刚接触React-Native不久,我就被深深折服了。前几天做项目用到了ViewPager做广告页,在研究了一番官方文档之后,终于也是大体做出来了,今天就分享给大家吧。其实,大家如果使用过Android的ViewPager,那么你可能会很容易的去理解这个组件了。下面是实现的代
    03-08
  • Vue3+TypeScript 项目中,配置 ESLint 和 Prett
    接上篇:从0搭建vite-vue3-ts项目框架:配置less+svg+pinia+vant+axios文档同步项目gitee:https://gitee.com/lixin_ajax/vue3-vite-ts-pinia-vant-less.git 一、Eslint:用于检测代码安装eslint相关依赖yarn add eslint eslint-plugin-vue @typescript-esli
    03-08
  • JavaScript defineProperties
    function defineProperties(obj, properties){  function convertToDescriptor(desc)  {    function hasProperty(obj, prop)    {      return Object.prototype.hasOwnProperty.call(obj, prop);    }    function isCal
    03-08
  • JavaScript--操作cookie javascript中可以操作c
    Session和cookie都是用来存储数据的Cookie:位于用户的计算机上,用来维护用户计算机中的信息,直到用户删除,就是存储在你本地的数据,在存储的时候可以设置过期时间,使用场景很多,比如最常见的是用户登录某个网站,登录之后将用户的用户名和密码存cookie
    03-08
  • SuperMap iClient for JavaScript初入
    介绍SuperMap for Js的简单使用.推荐先看下这篇文档:SuperMap iClient for JavaScript 新手入门 , 个人感觉是要好于官方的新手入门文档的.使用SuperMap js 的核心流程如下:创建地图Map创建Layer /控件创建要素 / Marker /..将 要素 / Marker /.. 添加入图层 L
    03-08
  • JavaScript new Date()IE浏览器下出错 NaN
    当涉及到编程,与日期的工作可能是棘手的。然而,幸运的是,大多数语言都已经完成了这个困难的工作,并有一种内置的日期功能来帮助我们。JavaScript是具有有用的功能来帮助大量输出,设置日期。The JavaScript Date Object开始日期在JavaScript中你需要做的第
    03-08
  • [javascript] ie下audio不支持一些媒体类型
     ie下audio不支持一些媒体类型 , 所以需要进行兼容处理这里可以用js进行判断 ,  并加载不同的资源文件 , 这样就兼容了ieif (b.canPlayType('audio/ogg; codecs="vorbis"')) { }else{ie下加载不同的资源文件}audio id="chatMessageAudio"source id="chatMes
    03-08
  • [javascript] ie下不支持incudes属性和方法
    [javascript] ie下不支持incudes属性和方法
    在使用elemetui的时候 , 在ie11下面会遇到这个报错不支持incudes属性和方法数组.incudes("元素") 是检测数组中是否包含某元素支持的版本是  可以替换为 数组.indexOf("元素")0 
    03-08
点击排行