css 宽度自适应

两个浮动元素一遍固定长度,另一边长度自适应:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>宽度自适应 - www.lellansin.com</title>
<style>
*{
	margin:0 ;
	padding:0;
}
#header{
	background-color:yellow;
	height:150px;
}
#left{
	float:left;
	background-color:red;
	width:250px;
	height:300px;
	position:relative;
}
#right{
	float:left;
	width: 100%;
	height:300px;
	margin-left:-250px;
	background-color:blue;
	text-align: right;
}
</style>
</head>
<body>
	<div id="header">
	头部
	</div>
	<div id="main">
		<div id="left">
			左边
		</div>
		<div id="right">
			右边
		</div>
	</div>
</body >
</html>

初次之外还有设置宽度百分比这种让宽度自适应的方法

ie6,ie7兼容性总结

 

1. 文字的行高不兼容。

同样是font-size:14px的宋体文字,在不同浏览器下占的空间不一样,ie下实际占高16px,下留白3px,ff 下实际占高17px,上留白1px,下留白3px,opera下就更不一样了。而且有的时候设置字体的时候,往往会多备用几种,比如设置了“微软雅黑”作文字体,往往还要设置其他诸如“黑体”之类的字体做备用,因为很多人的电脑上可能没有“微软雅黑”字体。而,实际上不同的字体的ling-height也是不同的,所以有的人用win7的电脑和用xp的电脑看到的页面时不一样的(字体不同)。

解决方案:给文字设定 line-height 。确保所有文字都有默认的 line-height 值。

2.容器变形。有的浏览器容器不容易变形,比如说ff浏览器中容器定义了height之后,容器边框的外形就确定了,不会被内容撑大,而ie下是会被内容撑大,高度限定失效。如果float 容器未定义宽度,ff下内容会尽可能撑开容器宽度,ie下则会优先考虑内容折行。故,内容可能撑破的浮动容器需要定义width。通常,增加padding、margin、还有border的时候都是在原有的width和height上添加,稍有不慎也会导致容器变形。所以在书写的网页的时候,对每个容器的长宽、边距不能单一的增减,而要互相关联考虑修改。

3.双倍margin(double-margin bug)。ie6下给浮动容器定义margin-left 或者margin-right 实际效果是数值的2倍。解决方案,给浮动容器定义display:inline。

5.mirror margin bug,当外层元素内有float元素时,外层元素如定义margin-top:14px,将自动生成margin-bottom:14px。 padding也会出现类似问题,都是ie6下的特产,该类bug 出现的情况较为复杂,远不只这一种出现条件,还没系统整理。解决方案:外层元素设定border 或 设定float。

引申:ff 和ie 下对容器的margin-bottom,padding-bottom的解释有时不一致,似乎与之相关。

6. 吞吃现象。还是ie6,上下两个div,上面的div设置背景,却发现下面没有设置背景的div 也有了背景,这就是吞吃现象。对应上面的背景吞吃现象,还有滚动下边框缺失的现象。解决方案:使用zoom:1。这个zoom好象是专门为解决ie6 bug而生的。

7.注释bug。注释也能产生bug~~~“多出来的一只猪。”这是前人总结这个bug使用的文案,ie6的这个bug 下,大家会在页面看到猪字出现两遍,重复的内容量因注释的多少而变。解决方案:用“<!–[if !IE]> picRotate start <![endif]–>”方法写注释。

有的时候js代码或者css中的代码注释也会影响到页面的内容。解决方案:尽量不要再其中注释、代码外置,或者在其中加入浏览器的注释方式。

js代码

–>

8.img 下的留白,大家看这段代码有啥问题:

把div的border打开,你发现图片底部不是紧贴着容器底部的,是img后面的空白字符(如“回车”“空格”等)造成,这些字符被当成是文本节点也被浏览器解析了,要消除必须这样写


后面两个标签要紧挨着。ie7下这个bug 依然存在。

解决方案:给img设定 display:block。

9. 失去line-height

文字

,在ie6下单行文字 line-height 效果消失了。

原因是<img />这个inline-block元素和inline元素写在一起了。解决方案:让img 和文字都 float起来。

引申:大家知道img 的align 有 text-top,middle,absmiddle啊什么的,你可以尝试去调整img 和文字让他们在ie和ff下能一致,你会发现怎么调都不会让你满意。索性让img 和文字都 float起来,用margin 调整。

10.clear层应该单独使用。也许你为了节省代码把clear属性直接放到下面的一个内容层,这样有问题,不仅仅是ff和op下失去margin效果,ie下某些margin值也会失效

dd

ff

11.ie 下overflow:hidden对其下的绝对层position:absolute或者相对层 position:relative无效。解决方案:给overflow:hidden加position:relative或者position: absolute。另,ie6支持overflow-x或者overflow-y的特性,ie7、ff不支持。

12.ie6下严重的bug,float元素如没定义宽度,内部如有div定义了height或zoom:1,这个div就会占满一整行,即使你给了宽度。float元素如果作为布局用或复杂的容器,都要给个宽度的。

13.ie6下的bug,绝对定位的div下包含相对定位的div,如果给内层相对定位的div高度height具体值,内层相对层将具有100%的width值,外层绝对层将被撑大。解决方案给内层相对层float属性。

14.width:100%这个东西在ie里用很方便,会向上逐层搜索width值,忽视浮动层的影响,ff下搜索至浮动层结束,如此,只能给中间的所有浮动层加width:100%才行,累啊。opera这点倒学乖了跟了ie。

—————————————————————————————————————–

ie的float bug(ie6,ie7)使前端工程师们为之困扰,最常见的现象就是:当浮动元素的父级元素在拖动滚动条的时候出现边框的缺失,对于此类问题的解决方案就是使浮动元素获得布局.

        在诸多的情况中,因为页面需要宽度自由伸缩而不能申明宽度为固定值,但我们可以设置*height:1%;,*在这里可谓是举足轻重,因为*只能被ie7及以下版本解析,ie8并不识别此类写法,所以可以使用这个写法来区别ie8和其他版本号的ie浏览器.对网上流行的ie8 beta1的hack,也算是一个补充.

        一些常用的hack测试

        * html  p {color:red;}           支持 IE6        不支持FF IE7 IE8b
        *+html p {color:red;}    支持 IE7 IE8b        不支持FF IE6
        p {*color:red;}                      支持 IE7 IE6        不支持FF IE8b

        IE8 中增加了 CSS3 中的子串匹配的属性选择器(substring matching attribute selectors),具体规则与正则中的匹配很相似:

        E[att^=’val’] //子串以’val’ 开始 
        E[att$=’val’] //子串以’val’ 结束 
        E[att*=’val’] //子串中包含’val’

        IE8 支持绝大多数基本的 CSS2.1 选择器,不支持的包括但不限于:[:first-line] 、[:first-letter]。
        对于 CSS2.1 中的 generated content 部分,即通过使用伪元素 :before 和 :after 添加文本内容,IE8 中支持 并未完全 。
        而对于几乎在其他浏览器中都支持的 opacity 和 RGBA ,IE8 中依旧没有支持。
        对于原来用来区分 IE 的 HACK 在 IE8 中基本失效(比如*property:value、*property:value等)。
        原有 IE 的 list-item whitespace bug 在 IE8 中依旧存在。 
        原有 IE 的 z-index bug 在 IE8 中依旧存在。 
        IE8 中产生新的 bug:当 line-heigth 小于正常值时,超出的部分将被裁切掉。 
        IE8 中依然不支持 display:table 。 
        IE8 中依然不支持 border 的 transparent 值。 
        IE8 中 @import 只支持三层嵌套。
        IE8中 border的 transparent 不被支持
        IE8中产生新的BUG:line-heigth BUG
        /*/p{ color:#1e90ff}/*/ 只针对IE8的hack,可以是属性也可以是类

——————————————————————————————

BUG描述:

页面中某DIV使用了position:relative,结合top=-25px等元素定位。在FF和IE7下表现正常,但是在IE6中该DIV会随鼠标滚动而滚动。

 

分析:

这是IE6一个已知的BUG:当某position:relative元素 被带有overflow:auto/scroll属性的块级元素包含时,会表现出postion:absolute的行为。

 

解决方法:

1.为包含块元素添加属性position:relative 。

2.把该元素的position:relative属性去掉,使用默认的static定位,并通过margin-top等属性实现类似的效果。

————————————————————————————————————————————————————————————————

ie6的末日即将来临,对我们前端开发人员来说,无疑是一个慰藉人心的喜讯.但这个末日也并非朝日可至,所以我们还是争取最后的胜利,用各种hack和方法来规避ie6下双边距,背景透明,重复文字等等一堆bug.下面是转载自前端观察(译自http://www.sitepoint.com/)中的10个修复ie6下bug技巧:
1. 使用DOCTYPE
你应该在一直每个HTML文件的头部都使用DOCTYPE,并且我们推荐使用strict 版本,比如:

<!DOCTYPE   HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”&gt;

或者,对于XHTML使用:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;

你需要处理的最棘手的事情就是IE6进入quirks模式——它已经够诡异了。
2. 设置position: relative
将一个元素设置为”position:relative”可以解决很多问题,特别是你曾经遇到隐藏的或对齐诡异的盒子。显然,你需要非常小心点儿,因为绝对定位的子节点可能会因此重新定位。
3. 将浮动元素设置为display:inline
具有margin属性的浮动元素可能引起著名的IE6双倍margin问题,比如,你为一个元素指定margin-left为5px,但是IE6中实际上却表现为10px。”display:inline”将解决这个问题,尽管这不是必须的,你的CSS仍然是有效的。
4. 将一个元素设置为hasLayout
很多IE6(和IE7)的渲染问题可以通过设置元素的hasLayout来解决。 这是一个IE内部属性(IE隐藏的,更多关于haslayout的资料,可以参阅这里),用来确定相对于其他元素,内容是如何布局和定位的。如果你需要设置一个inline元素(比如一个链接)为block元素,或者是应用透明效果,设置hasLayout也可能是必须的。 
最简单的设置hasLayout的方法是为CSS设置一个高度或宽度(zoom也可以用,但是zoom并不是CSS标准的一部分)。我们推荐设置实际尺寸,但是问题是这是不现实的,你可能需要使用”height:1%”。如果父元素并没有设置高度,该元素的实际高度并不受影响,而且这个时候hasLayout已经被启用。
5. 修正重复文字bug
复杂的布局可以触发在浮动元素的最后一些字符可能出现在出现在清除元素下面的bug。这里有几个解决方法,有些是完美的,但是做一些反复试验也是必须的: 
         .确保所有的元素使用”display:inline;” 
         .在最后一个元素上使用一个”margin-right:-3px;” 
         .为浮动元素的最后一个条目使用一个条件注释,比如:

<!–[if !IE]>Put your commentary in here…<![endif]–>

         .在容器的最后元素使用一个空的div(它也有必要设置宽度为90%或类似宽度。
>>>>>>你还可以访问positioniseverything.net 查看该问题的完整介绍。
6. 在可点击和悬停的元素上只使用<a>标签
IE6只认识对a标签的CSS hover效果。
你也可以在基于JavaScript的组件内使用他们来控制,以使他们保持键盘的可操作性。是有一些可替代的选择,但是<a>标签比其它方案更可靠。
7. 使用!important 或高级选择器来区分IE6
不使用传统Hack或在额外文件中的条件CSS的方法,写出特别针对IE6的可行的代码也还是有可能的。比如最小高度可以通过这段代码来定义:

#element {
     min-height: 20em;
     height: auto !important; /* 所有浏览器都理解这段代码 */
     height: 20em; /* IE6 错误的使用这个值 /*
}

IE6 不理解min-height并错误的用20em覆盖”auto”高度,但是,如果内容需要更多的空间的话,它会自动增加高度。
另外一个可选的方法是使用高级选择器,比如e.g.

#element {
     min-height: 20em;
     height: 20em;

/* IE6 无视下面的代码*/
#element[id] {
     height: auto;
}

8. 避免百分比单位
百分比会把IE搞糊涂的。除非你可以确切的控制每一个父元素的大小,才可能做到最佳预防。你可以通过!important在其他浏览器中继续使用百分比,比如:

body {
     margin: 2% 0 !important;
     margin: 20px 0; /* IE6 only */
}

9. 尽早测试并不断测试
不要等到你的网站或应用完成了才测试IE6;这样的话问题可能更糟糕,而且会花更多时间来修正。如果你的网站能够在Firefox和IE6中正常运行,那么一般在其它浏览器就不会有问题。 
10. 重构你的代码
经常发生的事情是,修正bug要比重新考虑一个布局问题要花更长的时间。对HTML做些小改动和一些简单的CSS常常更有效。这可能意味着你要放弃完美的代码,但是会出现较少的长期问题而且将来你会很清楚如果处理这些可能出现的问题。

css书写格式 /* css hacker */

使用css hacker我可以把浏览器分为3类:IE6 ;IE7和遨游;其他(IE8 chrome ff safari opera等)

  ◆IE6认识的hacker 是下划线_ 和星号 *

  ◆IE7 遨游认识的hacker是星号 *

  比如这样一个CSS设置:

  1. height:300px;*height:200px;_height:100px; 

  IE6浏览器在读到height:300px的时候会认为高时300px;继续往下读,他也认识*heihgt, 所以当IE6读到*height:200px的时候会覆盖掉前一条的相冲突设置,认为高度是200px。继续往下读,IE6还认识_height,所以他又会覆盖掉200px高的设置,把高度设置为100px;

  IE7和遨游也是一样的从高度300px的设置往下读。当它们读到*height200px的时候就停下了,因为它们不认识_height。所以它们会把高度解析为200px,剩下的浏览器只认识第一个height:300px;所以他们会把高度解析为300px。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个,所以书写的次序是很重要的。

  padding:20px; /* Firefox、chrome、IE8、safari、opera等*/

  *padding:25px; /*IE7、IE6、遨游*/

  _padding:20px; /*IE6*/

IE6 margin 双倍边距解决方案

IE6 margin 双倍边距解决方案
 

一、什么是双边距Bug?

先来看图:

我们要让绿色盒模型在蓝色盒模型之内向左浮动,并且距蓝色盒模型左侧100像素。这个例子很常见,比如在网页布局中,侧边栏靠左侧内容栏浮动,并且要留出内容栏的宽度。要实现这样的效果,我们给绿色盒模型应用以下CSS属性:

 

以下为引用的内容:
.floatbox {
float: left;
width: 150px;
height:
150px;
margin: 5px 0 5px 100px;

}

很简单,对吧?但是当我们在IE6中查看时,会发现左侧外边距100像素,被扩大到200个像素。如下图:

二、怎么会这样?

说实话,这个原因还真是不清楚。但是这样的结果确确实实在IE6中出现了。而且这种情况出现的条件是当浮动元素的浮动方向和浮动边界的方向一致时才会出现。如同上面的例子一样,元素向左浮动并且设置了左侧的外边距出现了这样的双边距bug。同理,元素向右浮动并且设置右边距也会出现同样的情况。同一行如果有多个浮动元素,第一个浮动元素会出现这个双边距bug,其它的浮动元素则不会。

三、如何修正这个Bug?

很简单,只需要给浮动元素加上display:inline;这样的CSS属性就可以了。就这么简单?对,就这么简单。如下图:

 

CSS代码如下:

 

以下为引用的内容:
.floatbox {

float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px
100px;
display: inline;

}

 

转自:http://blog.sina.com.cn/s/blog_4c1e6a010100nlee.html