`

css中的zoom的作用

    博客分类:
  • css
阅读更多
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,更多的时候其实是我们自己给自己制造了麻烦。希望你远离 BUG ,生活越来越美好。
分享到:
评论

相关推荐

    小标签大作用 CSS中zoom:1的使用方法

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

    css中zoom:1属性的定义和作用

    今天被问起CSS中有个zoom属性是干什么用的,虽然我知道这个属性是用来清除浮动,来触发haslayout的。但具体的定义还不是很了解,就百度了一点关于zoom属性的资料,然后总结了一下。 CSS zoom属性 zoom:设置或检索...

    CSS中的zoom属性和scale属性的用法及区别

    zoom 属性语法:zoom:normal | <number> | 默认值:normal适用于:所有元素继承性:有取值:normal:使用对象的实际尺寸。<number>:用浮点数来定义缩放比例。不允许负值<percentage>:用百分比来定义缩放比例。不...

    详解CSS中zoom属性或overflow:auto属性清除浮动的作用

    其实在CSS中的Zoom这个属性一般不为人知,甚至有些CSS手册中都查询不到。其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外,它还有其他一些作用,比如触发ie的...

    html-css-zoom

    html-css-zoom

    jQuery zoom图片弹出层插件简单的图片相册弹出层窗口

    jQuery zoom图片弹出层插件简单的图片相册弹出层窗口展示...link rel="stylesheet" href="css/zoom.css" media="all" /> [removed][removed] [removed][removed] html 格式 ...... </ul>

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

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

    zoomImage插件

    图片放大插件! $('a.myLinks').zoomimage(options);

    Zoom:带有原生 CSS 滚动的 JS Zoom 库

    带有原生 CSS 滚动的 JS Zoom 库 请参阅。 Zoom允许您在桌面和移动应用程序中使用本机滚动轻松进行缩放。 ###好处 Zoom不需要任何库 Zoom可以使用鼠标滚轮与桌面应用程序一起使用,也可以使用捏合与移动应用...

    CSS中不为人知Zoom属性的使用介绍(IE私有属性)

    其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动、清除margin的...而这个属性只要在IE中才起作用,

    mui的js和css资源

    mui下载 mui.js下载 mui.css下载

    L.Control.Zoomslider.css

    L.Control.Zoomslider.css

    jQuery图像查看插件Zoom.js

    图片点击放大,再次点击或者滚动窗口或者按 ESC 键即可恢复原始大小,非常流畅,使用方法也非常简单,引入zoom.js和zoom.css文件之后,对图片添加```data-action="zoom"```属性即可。

    js+div+css弹出层.txt

    js+div+css弹出层 模拟弹出窗口,从网上收集的简单例子,具体可以再丰富。

    举例详解CSS中的cursor属性

    这里简单介绍两个相当实用的组合zoom-in/zoom-out以及grab/grabbing. 本文重在展示,开阔眼界。二、zoom-in/zoom-out组合 zoom-in/zoom-out可以让元素的鼠标形状变成“放大镜”或者“放小镜”。如下: 于是,我们...

    cloud-zoom.1.0.2.zip

    这是cloud-zoom里面有三个文件,包括js,css,都包含了对图片文件的处理。

Global site tag (gtag.js) - Google Analytics