CSS中常见的BUG调试

CSS中常见的BUG调试

大家好,又见面了,我是全栈君。

1、布局——layout

布局是windows提出的概念,用于控制元素的尺寸和定位。

拥有布局的元素负责自身及其子元素的尺寸及定位,而没有布局的元素仅仅能依靠近期的祖先元素进行控制。

通常在IE6中出现的BUG。非常可能是由于布局的缘故而产生的,因而修复IE中BUG的时候,第一件事就是尝试通过规则迫使元素拥有布局来看是否能修复。

默认情况下拥有布局的元素包含:body、html(标准模式下)、table、tr、td、img、hr、input、select、textarea、button、iframe、embed、object、applet、marquee

通过设置CSS属性也能够迫使元素拥有布局:

1)float:left或right

2)display:inline-block

3)width:不论什么值

4)height:不论什么值

5)zoom:不论什么值

6)writing-mode:tb-rl

在IE7中,下面属性也可迫使元素拥有布局:

1)overflow:hidden、scroll或auto

2)min-width:不论什么值

3)max-width:none之外的不论什么值

在IE6中由于布局而常出现的问题包含:

1)拥有布局的元素不会收缩:即是假设元素设定了尺寸,而元素内容超过元素尺寸时,通常是内容溢出到元素外,而IE6中是将元素进行扩展以适应内容。

2)布局元素对浮动进行自己主动清理:常见的一个样例是文字环绕图片,假设文字段落拥有布局,则文字不再环绕图片。

3)相对定位的元素没有布局

4)在拥有布局的元素之间外边距不会叠加

5)在没有布局的块级链接上,单击区域仅仅覆盖文本

6)在滚动中。列表项上的背景图片间歇性的显示和消失

2、hack和过滤器

1)IE条件凝视

a)适用于IE5及其更高版本号

<!– [if IE]

    <link rel=”stylesheet” type=”text/css” href=”ie.css” />

–>

b)适用于IE6

<!– [if IE 6]

    <link rel=”stylesheet” type=”text/css” href=”ie.css” />

–>

c)低于IE6

<!– [if lt IE 6]

    <link rel=”stylesheet” type=”text/css” href=”ie.css” />

–>

2)应用星号HTML hack

在IE6及其更低版本号中,有一个匿名的根元素。包围着html元素。因此能够利用该匿名根元素来讲特定的规则应用在IE6及其更低版本号的浏览器上,如

* html { width: 1px; }

3)应用子选择器hack

利用子选择器不被IE老版本号所理解的特性。创建仅仅适用于现代浏览器的规则

html>body { background-image: url(bg.png); }

仅仅有支持子选择器的浏览器才干应用该规则

3、常见BUG及其修复方法

1)双外边距浮动bug——IE6及其更低版本号

bug:不论什么浮动元素的外边距加倍

修复:将元素的display属性设置为inline

2)3像素文本偏移bug——IE6及其更低版本号

bug:当一个非浮动元素与一个浮动元素相邻时。两个元素之间会自己主动加入一个3像素的间隙

修复:方法一:将非浮动元素设置为浮动;方法二:为非浮动元素设置规则:_zoom: 1; margin-left: value; _margin-left: value-3px; (注:zoom是触公布局,而下划线是针对IE7更低版本号的hack)

3)IE6的躲猫猫bug

bug:一个浮动元素跟着一个非浮动元素,之后再跟着一个清除浮动元素,全部元素都包括在一个有背景颜色或背景图片的父元素中。非浮动元素会被父元素覆盖,又一次载入才会出现。

修复:方法一:去掉父元素的背景颜色或图片;方法二:避免清除浮动元素与浮动元素接触;方法三:给父元素指定一个行高;方法四:将浮动元素和父元素的position属性设置为relative。

4)相对定位的元素中绝对定位错误——IE6及其更低版本号

bug:相对定位的父元素中包括绝对定位的子元素。子元素定位时的參照物不是父元素而是视口。(IE6中相对定位的元素没有拥有布局)

修复:迫使相对定位父元素拥有布局(设置width或height,如 _height: 1%;)

    <link rel=”stylesheet” type=”text/css” href=”ie.css” />
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/116264.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 计算机二级考试python考试大纲

    计算机二级考试python考试大纲全国计算机等级考试二级Python语言程序设计考试大纲(2018年版)基本要求1.掌握Python语言的基本语法规则。2.掌握不少于2个基本的Python标准库。3.掌握不少于2个Python第三方库,掌握获取并安装第三方库的方法。4.能够阅读和分析Python程序。5.熟练使用IDLE开发环境,能够将脚本程序转变为可执行程序。6.了解Python计算生态在以下方面(不限于)的主要第三方库名称:网络爬虫、数据分析、数据可视化、机器学习、Web开发等。考试内容一、Python语言基本语法元

    2022年10月19日
  • js实现时钟代码

    js实现时钟代码代码<!DOCTYPEhtml><html><headlang=”en”><metacharset=”UTF-8″><title></title><style>/*全局*/*{margin:0;…

  • Python金融行业必备工具

    Python金融行业必备工具有些国外的平台、社区、博客如果连接无法打开,那说明可能需要“科学”上网量化交易平台国内在线量化平台:BigQuant-你的人工智能量化平台-可以无门槛地使用机器学习、人工智能开发量化策略,基于python,提供策略自动生成器镭矿-基于量化回测平台果仁网-回测量化平台京东量化-算法交易和量化回测平台聚宽-量化回测平台优矿-通联量化实验室Ricequant

  • 查看sql_mode_mysql命令行执行sql脚本

    查看sql_mode_mysql命令行执行sql脚本1,执行SQL查看select@@session.sql_mode;全局级别:查看select@@global.sql_mode;2,修改set@@session.sql_mode=’xx_mode’setsessionsql_mode=’xx_mode’全局级别:修改setglobalsql_mode=’xx_mode’;set@@global.sql_mode=’xx_mode’;session均可省略,默认session,仅对当前会话有效全局修改的话,

  • C语言:求最大公约数和最小公倍数「建议收藏」

    C语言:求最大公约数和最小公倍数「建议收藏」记录自己的c语言学习过程输入两个正整数,分别求出最大公约数和最小公倍数代码:#include&amp;amp;lt;stdio.h&amp;amp;gt;intmain(){ intm,n,a,b; printf(&amp;quot;输入两个正整数:&amp;quot;); scanf(&amp;quot;%d%d&amp;quot;,&amp;amp;amp;m,&amp;amp;amp;n); if(m&am

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号