CSS 备忘(转载)
2010-12-11 14:00 爱研究源码的javaer 阅读(256) 评论(0) 编辑 收藏 举报2.超长连续字符自动换行：最好的办法是在父元素中定义宽度，并使用如下样式表，综合起来就是
width:300px;
word-wrap:break-word;
overflow:hidden;
而不是
word-wrap:break-word; word-break:break-all;或者word-wrap:break-word; overflow:auto;
IE下只有word-wrap:break-word; 就OK了，Firefox下需要增加overflow:hidden;（不知道怎么回事，Firefox3似乎处理的很好，不加overflow也没问 题，奇怪）主要是隐藏长串英文（长串无空格英文一般都是恶意的，没必要显示）
3.Firefox高度不能自适应
<div style="width:200px;border:1px solid red;">
<p style="width:100px;float:left;">
常 见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题 常见问题常见问题常见问题常见问题常见问 题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题 常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常 见问题常见问题常见问题常见问题
</p>
</div>
这段代码在IE和Firefox上显示是不同的，IE6和IE7中显示效果为
FireFox显示为：
但如果去掉p的float=left，则显示效果是一样的，这就说明IE(6,7)和firefox对float的理解是不同的，Firefox在 处理外层高度的时候不会理会内层的浮动元素，而IE则不然，解决办法：在</div>与</p>之间插入<div style="clear:both"></div>这样，浮动被清除了，就可以撑开了
（注意：如果外层定义了高度，则IE6的处理与IE7，FireFox不同，IE6可以撑开，而IE7和Firefox则不可以，也就是说，IE6 任何时候都能撑开，IE7当外层不定义高度也就是高度为auto的时候可以撑开，而Firefox只有当外层不定义高度，并且内层不是浮动的时候才可以被 撑开：nnd，真麻烦）
4.IE6的双倍边距BUG
<div style="float:left;margin-left:10px;width:200px;height:200px;border:1px solid red;">
常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题常见问题
</div>
本来左边距(浏览器的左边距，不是和其他层之间)是10，可是IE6确显示为20，解决办法是样式后面加上display:inline;，这个是IE的一个Bug，按照规定，有float的块元素会忽略掉display声明，所以这么解决也是个好办法
5.IE(6,7)下图片下方有空隙产生的Bug
<div style="border:1px solid red;background:orange;">
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="google" />
</div>
这个问题的解决办法大致有两个，一个是将img和div全部放到一行上，另一个一劳永逸，给img加样式display:block;
6.IE6下这两个层中间有间隙Bug
.left {
float:left;
width:100px;
height:100px;
background:red
}
.right {
width:100px;
height:100px;
background:orange
}
<div class="left">aaaaaa</div>
<div class="right">aaaaaa</div>
还是浮动的问题，请参照上篇文章，对浮动的处理IE系列和Firefox系列处理不同，解决的办法是让right也向左浮动，这样两个层就紧贴着了（如果不这样，Firefox中两个层会完全重叠）
或者针对IE6：right增加定义_margin-left:-3px;
7.内容超过长度后以省略号显示的方法
.ellipsis {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}
<div>显示省略号显示省略号显示省略号显示省略号显示省略号</div>
此方法适用与IE与OP浏览器,FireFox中不会显示省略号，但会因此超出的部分
注意点：a.必须是块元素 b.必须定义宽度 c.必须设定不换行
8.如何垂直居中文本
.vcenter
{
height:80px;
line-height:80px;
border:1px solid red
}
<div class="vcenter">示例文字示例文字示例文字示例文字示例文字</div>
给容器设置一个与其高度相同的行高就可以了:针对有固定高度的块元素
9.如何对齐文本与文本输入筐（困扰我很久的问题，以前一直用table来解决...）
input {
width:200px;
height:30px;
border:1px solid blue;
vertical-align:middle
}
<input type="text" />示例文字示例文字示例文字示例文字示例文字
10.怎么让一个块元素水平居中
.acenter {
margin:0 auto;
width:500px;
height:200px;
border:1px solid red
}
<div class="acenter"></div>
关键在margin:0 auto;
11.层定义了固定的高度后，IE7和FireFox无法撑开（主要解决需要有最小高度，但当内容大于最小高度时高度自适应的情况）
.div2 {
width:200px;
height:200px;
border:1px solid red
}
<div class="div2">
示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字
</div>
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义：
.div2 {
width:200px;
height:auto!important;
height:100px;
min-height:100px;
border:1px solid red
}
IE6不认识min-height:100px;，也不认识!important，所以这两句会被忽略，只有height起作用，而Firefox支持!important，所以height不起作用而min-height起作用了
12.IE6下面为什么无法定义1px左右高度的容器
.div3 {
background:red;
height:1px;
}
<div class="div3"> </div>
在IE6下高度依然是10px左右，这是因为默认的行高造成的，解决的方法：样式表加上 overflow:hidden 或者 line-height:1px
特别注意：div里面的 ，如果去掉这个，所有的浏览器都不会显示任何东西，也就是说，如果块元素内部没有内容，又不定义宽度的话，是不会呈现的。
13.怎么样才能让层显示在FLASH之上
<div style="position:relative;">
<div class="div4">
aaa示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例示例文字示例文字示例文字示例文字示例文字示例文字示例
</div>
<object class="object1" type="application/x-shockwave-flash" data="http://gg.blueidea.com/2005/www/m533-104.swf">
<param name="movie" value="http://gg.blueidea.com/2005/www/m533-104.swf" />
</object>
</div>
解决的办法是给FLASH设置透明
<param name="wmode" value="transparent" />
14.怎样使一个已知大小的层垂直居中于浏览器中
.div5 {
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}
这里我们使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二
15.高度未定的图片如何垂直居中于层中
网上解决比较好的是三层嵌套的，用起来有点麻烦如下：
..image300 {position:relative;width:300px;height:300px; line-height:300px;border:1px solid #ddd; background:#fff; padding:2px;overflow:hidden;text-align:center;}
.image300 p {+position:absolute;top:50%;}
.image300 p:after {content:".";font-size:1px;visibility:hidden;}
.image300 img {+position:relative;top:-50%;left:-50%;vertical-align:middle; margin:0 auto;display:block;}
<div class="image300">
<p>
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" />
</p>
</div>
16.h1和div放到一块为什么中间有空隙
<div>
<h1>标题</h1>
<div>内容</div>
</div>
标题和内容之间有空隙，但如果h1换成div就没问题：主要是h1默认有margin，定义
h1 {margin:0;} 就可以了(同理：<p>,<h2>,<ul>...)
17.IE6捉迷藏bug
<div style="border:1px solid blue;background:#fff;">
<div style="float:left;border:1px solid green;">左边漂浮的任意内容左边漂浮的任意内容左边漂浮的任意内容</div>
<div>隐藏的内容</div>
<div style="clear:both;"></div>
</div>
在IE6下面“隐藏的内容”显示不出来，但用鼠标滑动一下，就可以显示了，可能是被外层的背景给遮住了
解决办法(任选其一即可)：
a.给外层div一个明确的宽度或高度（width:100%;或height:100%;两者之一即可）：最理想的办法
b. 去掉外层的背景
c.将外层div和浮动的div全部设置成position:relative
d.不使用clear：both或者保持clear：both和浮动层连在一起
18.IE(6,7)下一个奇怪的显示问题
<div style="width:400px;border:1px solid red;padding:20px;background:#000;">
<div style="border:1px solid green;background-color:#fff;">
<div>dddddddddddddddddddddddd</div>
<div style="float:right;">yyyyyyyyyyyyyyyyyyyyyyy</div>
<div style="clear:both;"></div>
</div>
</div>
上面这段在IE(6,7)下显示效果是：
但在Firefox下显示为
Firefox下的效果是正确的，为什么会出现这种情况呢？真奇怪
如果给第二层（红色代码）加上高度或者宽度（width:100%;或height:100%;两者之一即可）就会和Firefox显示结果一样
可以看出解决办法和上面的躲猫猫极为相似（出现的原因也相似，那就是两个都有 clear：both，应当是处理clear：both时IE出现问题），这一点给我们一个启示：块元素一定要显式定义宽度，虽然不定义宽度默认是 100%，但显式定义（100%也可）能避免很多麻烦。
