浏览器中CSS的BUG

时间：2023-02-27 00:09:41

对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明.

其它请参考:CSS hack 针对IE6，IE7，firefox显示不同效果 
1.div的垂直居中问题  
vertical-align:middle;  
将行距增加到和整个DIV一样高 line-height:200px;  
然后插入文字，就垂直居中了。缺点是要控制内容不要换行。 
2. margin加倍的问题      
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。 
解决方案是在这个div里面加上display:inline;     
例如： 
<#div id=”imfloat”>     
相应的css为     
#IamFloat 
{ 
float:left; margin:5px;/*IE下理解为10px*/  
display:inline;/*IE下再理解为5px*/ 
}   
3.浮动ie产生的双倍距离      
#box{ 
float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略 
}  
这里细说一下block与inline两个元素： 
block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素); 
Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素);     
#box 
{  
display:block; //可以为内嵌元素模拟为块元素  
display:inline; //实现同一行排列的效果  
diplay:table;  
} 
4 IE与宽度和高度的问题  IE 不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。     
比如要设置背景图片，这个宽度是比较重要的。 
要解决这个问题，可以这样：     
#box{ width: 80px; height: 35px;} 
html>body #box 
{  
width: auto; height: auto; min-width: 80px; min-height: 35px; 
} 
5.页面的最小宽度     
min -width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类, 然后CSS这样设计： 
#container{ min-width: 600px; width:e-xpression(document.body.clientWidth < 600? "600px": "auto" );}     
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。 
6.DIV浮动IE文本产生3象素的bug     
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.     
#box{ float:left; width:800px;}    
#left{ float:left; width:50%;}    
#right{ width:50%;}    
*html #left{ margin-right:-3px; //这句是关键}    
<div id="box"> 
    <div id="left"></div>  
    <div id="right"></div> 
</div> 
7.IE捉迷藏的问题     
当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。 
解决办法： 
对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。   
8.float的div闭合;清除浮动;自适应高度;     ① 例如：<#div id=”floatA” ><#div id=”floatB” ><#div id=” NOTfloatC” >这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB的属性已经设置为 float:left;)   这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。在 <#div class=”floatB”> <#div class=”NOTfloatC”>之间加上 < #div class=”clear”>这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。 并且将clear这种样式定义为为如下即可： .clear{ clear:both;}    
作为外部 wrapper 的 div 不要定死高度 
为了让高度能自动适应，要在wrapper里面加上overflow:hidden; 当包含float的 box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。    
例如某一个wrapper如下定义： .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}    
9.对于排版 
我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景, 
譬如:   <div id=”page”>   <div id=”left”></div>   <div id=”center”></div>   <div id=”right”></div>    </div>    
比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的, 
但是我们会发现随着left center right的向下拉长,而 page居然保存高度不变,问题来了, 
原因在于page不是float属性,而我们的page由于要居中,不能设置成float, 
所以我们应该这样解决:     
<div id=”page”>    
<div id=”bg” style=”float:left;width:100%”>   
<div id=”left”></div>    
<div id=”center”></div>    
<div id=”right”></div>    
</div>    
</div>    
再嵌入一个float left而宽度是100%的DIV解决之  
10.万能float 闭合(非常重要!)     
关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽.    
/* Clear Fix */  
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }    
.clearfix { display:inline-block; }     
/* Hide from IE Mac */     
.clearfix {display:block;}    
/* End hide from IE Mac */    
/* end of clearfix */     
或者这样设置：.hackbox{ display:table; //将对象作为块元素级的表格显示}   
11.高度不适应     
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或paddign 时。     
例：    
#box {background-color:#eee; }      
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }      
<div id="box">      
<p>p对象中的内容</p>      
</div>      
解决方法： 
在P对象上下各加2个空的div对象CSS代码： 
.1{height:0px;overflow:hidden;}或者为DIV加上border属性。 
12 .IE6下为什么图片下有空隙产生   解决这个BUG的方法也有很多, 
可以是改变html的排版, 
或者设置img 为display:block  
或者设置vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 都可以解决. 
13.如何对齐文本与文本输入框  
加上 vertical-align:middle;  
<style type="text/css">  
<!--  
input {width:200px; height:30px;border:1px solid red;vertical-align:middle; } 
--> 
</style> 
14.web标准中定义id与class有什么区别吗? 
一.web标准中是不容许重复ID的,比如 div id="aa"   不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他.  
二.属性的优先级问题 ID 的优先级要高于class,看上面的例子 
三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单. 
15. LI中内容超过长度后以省略号显示的方法   此方法适用与IE与OP浏览器  
<style type="text/css">  
<!-- 
li { 
width:200px; 
white-space:nowrap; 
text-overflow:ellipsis; 
-o-text-overflow:ellipsis;  
overflow: hidden;      
}  
-->  
</style> 
16.为什么web标准中IE无法设置滚动条颜色了  解决办法是 
将body换成html  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<style type="text/css">  
<!--  
html {       
scrollbar-face-color:#f6f6f6;       
scrollbar-highlight-color:#fff;      
scrollbar-shadow-color:#eeeeee;      
scrollbar-3dlight-color:#eeeeee;       
scrollbar-arrow-color:#000;       
scrollbar-track-color:#fff;       
scrollbar-darkshadow-color:#fff;       
}  
-->  
</style> 
17.为什么无法定义1px左右高度的容器 
IE6下这个问题是因为默认的行高造成的, 
解决的方法也有很多 
例如:overflow:hidden | zoom:0.08 | line-height:1px 
18.怎么样才能让层显示在FLASH之上呢 
解决的办法是给FLASH设置透明  
<param name="wmode" value="transparent" /> 
19.怎样使一个层垂直居中于浏览器中 
这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以2 
<style type="text/css">  
<!— 
div  
{       
position:absolute;       
top:50%;       
lef:50%;       
margin:-100px 0 0 -100px;       
width:200px;       
height:200px;       
border:1px solid red;       
}  
-->  
</style>

浏览器中CSS的BUG的更多相关文章

  1. IE6中CSS常见BUG全集及解决方案——摘自网友

    IE6中CSS常见BUG全集及解决方案 IE6双倍边距bug 当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况.如外边距设置为10px, ...

  2. jquery博客收集的IE6中CSS常见BUG全集及解决方案

    今天的样式调的纠结,一会这边一会那么把jquery博客折腾的头大,浏览器兼容性.晚上闲着收集一些常见IE6中的BUG 3像素问题及解决办法 当使用float浮动容器后,在IE6下会产生3px的空隙,有 ...

  3. IE浏览器兼容 css之bug 问题

    bug的几种常见原因: 1.盒模型bug      原因:没有正确声明doctype(如果没有声明doctype,各浏览器对代码的解析有不同的规范).解决方法:使用严格的doctype声明. 2.各浏 ...

  4. 针对IE浏览器里面CSS的Bug解决方法

    IE6双倍边距bug 当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况.如外边距设置为10px, 而左侧则呈现出20px,解决它的方法是 ...

  5. 第十一章：WEB浏览器中的javascript

    客户端javascript涵盖在本系列的第二部分第10章,主要讲解javascript是如何在web浏览器中实现的,这些章节介绍了大量的脚本宿主对象,这些对象可以表示浏览器窗口.文档树的内容.这些章节 ...

  6. JavaScript权威指南--WEB浏览器中的javascript

    知识要点 1.客户端javascript window对象是所有客户端javascript特性和API的主要接入点.它表示web浏览器的一个窗口或窗体,并且可以用window表示来引用它.window ...

  7. 各种主流浏览器CSS、BUG兼容

    1.div的垂直居中问题 vertical-align:middle;将行距增加到和整个DIV一样高 line-height:200px;然后插入文字,就垂直居中了.缺点是要控制内容不要换行.---- ...

  8. css在各浏览器中的兼容问题

    CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并 整理了一下.对于web2.0的过度,请尽量用xhtml ...

  9. CSS中常见的BUG调试

    1.布局--layout 布局是windows提出的概念,用于控制元素的尺寸和定位. 拥有布局的元素负责自身及其子元素的尺寸及定位,而没有布局的元素仅仅能依靠近期的祖先元素进行控制. 通常在IE6中出 ...

随机推荐

  1. ANNOTATION PROCESSING 101 by Hannes Dorfmann — 10 Jan 2015

    原文地址:http://hannesdorfmann.com/annotation-processing/annotationprocessing101 In this blog entry I wo ...

  2. 烂泥：Windows下安装与配置Nginx web服务器

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. 前几篇文章,我们使用nginx都是在linux环境下,今天由于工作的需要.需要在windows环境也使用nginx搭建web服务器. 下面记录下有关ng ...

  3. 使用Struts1完成用户登录功能

    1.Struts框架 框架(framework):就是一系列代码和开发模式的整合,使用框架后,所有开发人员都会按照框架提供的规范进行开发,使代码更容易维护和扩展. 使用框架的优点: 1)   易于维护 ...

  4. ecma6的学习好网站

    http://www.nodeclass.com/api/ECMAScript6.html#function http://es6.ruanyifeng.com/#docs/destructuring ...

  5. Liunx系统升级自带的Python版本

    一.查看系统信息 [root@localhost ~]# cat /etc/redhat-release CentOS release 6.4 (Final) [root@localhost ~]# ...

  6. 第42节：Java知识点回顾复习

    Java介绍 Java是一门面向对象的程序设计的编程语言,在1995年,sun公司发布了Java这门编程语言,有咖啡的名称,是当时灵机一动的想法.在2010年的时候被Oracle公司收购了,目前jdk ...

  7. python中的logging模块学习

    Python的logging模块 Logging的基本信息: l  默认的情况下python的logging模块打印到控制台,只显示大于等于warning级别的日志 l  日志级别:critical ...

  8. Python requests库如何下载一个图片资源

    原文地址https://blog.csdn.net/u011541946/article/details/77700074 前面一篇文章介绍了response对象的一些常用API,也已经提到,我们的重 ...

  9. &lbrack;翻译&rsqb; FastReport TfrxReport组件使用

    一:加载和保存报表 报表默认保存在项目窗体文件中,大多数情况下,没有更多的操作要深圳市, 因此,你不需要采取特别措施来载入报告.如果你决定保存报表到文件或是数据库中 (这样更灵活, 比如修改报表不用重 ...

  10. &lpar;Lua&rpar; C&plus;&plus; 加入 Lua 環境擴充應用強度

    Lua 在網上有非常多的介紹,就是一個小而巧的語言,可以放入嵌入式系統 也可以在一般的應用上非常強大,這邊主要記錄如何讓Lua加入C++裡頭應用 Lua source code 是以 C 語言下去編寫 ...

相关文章