div CSS browser compatibility issues (IE6.0, IE7.0, ie8, FireFox)_html/css_WEB-ITnose

div CSS browser compatibility issues sorted out (IE6.0, IE7.0, ie8, FireFox)_html/css_WEB-ITnose

Vertical centering issue in 1.p

vertical-align:middle; Increase the line spacing to the same height as the entire DIV, line-height:200px; Then insert the text and it will be vertically centered. The disadvantage is that the content must be controlled not to wrap. Powered by 25175.net

2. The problem of doubling the margin

The margin set for a div set to float under IE will be doubled. This is a bug that exists in ie6. The solution is to add display:inline;
to this div. For example: >#box{ float:left; width:100px; margin:0 0 0 100px; //In this case, IE will generate a distance of 200px display:inline; //Ignore the float}
Let’s talk about block in detail here There are two elements with inline: the characteristic of the block element is that it always starts on a new line, and the height, width, line height, and margins can all be controlled (block element); the characteristic of the inline element is that it is on the same line as other elements , uncontrollable (embedded elements);

#box{ display:block; //Can simulate inline elements as block elements display:inline; //Achieve the effect of arranging in the same row diplay:table;

<#div id=”imfloat”>    
相应的css为    
#IamFloat{    
float:left;    
margin:5px;/*IE下理解为10px*/    
display:inline;/*IE下再理解为5px*/}

4 Problems with IE and width and height

IE does not recognize the definition of min-, but in fact it treats normal width and height as if there is min. This becomes a big problem. If you only use width and height, these two values ​​​​will not change in a normal browser. If you only use min-width and min-height, the width and height are not set at all under IE. ​​
For example, if you want to set a background image, this width is more important. To solve this problem, you can do this:
#box{ width: 80px;height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

5. Minimum width of the page

min -width is a very convenient CSS command. It can specify that the minimum width of the element cannot be less than a certain width, so that it can be guaranteed The layout has always been correct. But IE doesn't recognize this, and it actually treats width as the minimum width. In order to make this command work on IE, you can put a dc6dce4a544fdca2df29d5ac0ea9906b under the 6c04bd5ca3fcae76e30b72ad730ca86d tag, then specify a class for the div, and then design the CSS like this:
#container{ min-width: 600px; width:expression(document.body.clientWidth 781694747138120610974a86df8fd943 between 9d5768cb5fcab72f2b1dd18054a909a8 e764ccd31cb80ea78c2517dce20e34ad. This div must pay attention to its position and must be consistent with the two There cannot be a nested relationship between sibling divs with float attributes, otherwise an exception will occur. And define the clear style as follows: .clear{ clear:both;}  
② As an external wrapper div, do not set the height. In order to allow the height to automatically adapt, add it to the wrapper. Go to overflow:hidden; When a box containing float is included, the height automatic adaptation is invalid under IE. At this time, the layout private attribute of IE should be triggered (the evil IE!) You can use zoom:1; to achieve this. compatible.
For example, a wrapper is defined as follows:

.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}

③对于排版,我们用得最多的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解决之   

④万能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设置透明 
04eb23d009380c3f2f7f0661888aabd2

19.怎样使一个层垂直居中于浏览器中 

这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二 

<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>

以上就是div+CSS浏览器兼容问题整理(IE6.0、IE7.0 ,ie8 , FireFox)_html/css_WEB-ITnose的内容，更多相关内容请关注PHP中文网（www.php.cn）！