css问题解决方案

[u][/u]CSS问题解决方案管理


1，在IE6中，实现半透明遮罩，下拉菜单显示在最顶层。
在IE6中有个bug，select控件永远显示在最前端，在IE6中实现半透明遮罩时下拉菜单（select）始终显示在最顶层。这个问题解决方案如下：
（1）在显示遮罩层时隐藏下拉菜单，隐藏遮罩层时显示下拉菜单。
（2）可以使用iframe来实现遮罩，这样iframe遮罩显示时，下拉菜单会自动被隐藏，iframe遮罩隐藏时，下拉菜单会自动显示。

2，css实现复选单选框与文字对齐。
在大多数网站使用的主流文字大小为12px，因为在目前高分辨率显示器屏幕下，11px的汉字，其像素点开始不规整，文字不如12px来的显示良好。12px大小的文字就是主流也是底线。然而12px的文字与复选单选框是不对齐的，只有14px大小的文字显示才会和单选复选框对齐。这个问题的解决方案如下：

（1）以vertical-align:text-bottom为基础
在复选单选按钮上加入如下css（vertical-align:text-bottom; margin-bottom:1px; margin-bottom:-2px\9;）
（2）以vertical-align:text-top为基础
在复选单选按钮上加入如下css（height:13px; vertical-align:text-top; margin-top:0;）
（3）以vertical-align:bottom为基础
在复选单选按钮上加入如下css（height:15px; vertical-align:bottom; margin-bottom:3px; margin-top:-1px;）
（4）以vertical-align:top为基础
在复选单选按钮上加入如下css（height:14px; vertical-align:top;）
（5）以vertical-align:middle为基础的
在复选单选按钮上加入如下css（vertical-align:middle; margin-top:-2px; margin-bottom:1px;）

3，css实现连续字符换行
word-wrap是控制换行的。
使用break-word时，是将强制换行。中文没有任何问题，英文语句也没问题。但是对于长串的英文，就不起作用。
word-break是控制是否断词的。
normal是默认情况，英文单词不被拆开。
break-all，是断开单词。在单词到边界时，下个字母自动到下一行。主要解决了长串英文的问题。
keep-all，是指Chinese, Japanese, and Korean不断词。即只用此时，不用word-wrap，中文就不会换行了。

1）在IE和Firefox中实现div元素中连续字符换行可以使用：
.wrap{ word-wrap:break-word; width:200px;}
（2）在IE和Firefox中实现td元素中连续字符换行使用：
.wrap{ word-wrap:break-word; width:200px;}

在IE6和IE7中td元素的连续字符实现了换行但是IE8和firefox中td元素的连续字符没有实现换行，当我们加入max-width:200px属性后Firefox中td元素的连续字符实现了换行，而IE8中td元素的连续字符没有换行，如果我们加入word-break:break-all属性后IE8中td元素的连续字符实现了换行，但同是也但来了断词问题。
.wrap{ word-wrap:break-word; max-width:200px; width:200px; word-break:break-all;}
在上面语句中IE6和IE7不支持max-width该属性。在折中范围类我们可以选择这几个属性中实现连续字符换行。

4，Css实现阴影效果
实现div层边框的阴影效果一般有两中方法，一种是通过图片背景来实现，另一种是通过Css来实现，第一种实现复杂，不用考虑浏览器兼容性问题，第二种实现容易，需要考虑浏览器的兼容性问题。

.shade{
width: 200px; height: 300px; margin: 50px auto; background-color: #fff;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=120,strength=6);/*ie*/
-moz-box-shadow: 3px 3px 4px #000; /* FireFox */
-webkit-box-shadow: 3px 3px 4px #000;  /* Chrome && Safari */
box-shadow: 3px 3px 4px #000; /* Opera */
}

shade中参数：第一个参数是x轴阴影段长度，第二个参数是y轴阴影段长度，第三个参数是往四周阴影段长度，第四个参数是阴影段颜色。
Filter中参数：direction 阴影角度 0°为从下往上 顺时针方向，strength 阴影段长度。

5，Width100%缩放网页出现空白
当我们设置某一内容层的宽带为width100%并给其设置某一背景色或图片，同时也给页面设置了一个最小宽度值，当页面缩小超过这个最小值时浏览器会出现横向滚动条，当我们拖得横行滚动条会看到被设置width100%的内容层背景出现了空白。出现这个问题的原因是浏览器是以当前窗口大小为100%，而不是页面最小宽度值为100%的值。
解决该问题的方法有很多，最简单的解决方法是给该内容层加上一个宽度最小值为页面最小宽度值，这样达到最小值时，内容层就不会取width100%的值而是取宽度最小值。

 .minWidth{
	Width:100%;
	Min-width:900px;
	Background-color:red;
}

6，Firefox中去掉table动态border的bug
在Firefox中table的th行设置了border为有边框而td行设置为无边框，那么当我们动态添加或操作td行的时候（td的border设置为none）td行偶尔会出现border，解决此问题可以设置td的boder为hidden。

7，设置水平内容超出隐藏
我们可通过overflow属性的属性值设定为“hidden”将盒中的容纳不下的内容隐藏，如果使用text-overflow属性，可以使盒中内容隐藏的同时在末尾显示一个代表省略的符号“...”,不过该属性在当盒中的内容在水平方向上超出盒的内容范围时才有效。适合单行过长隐藏显示。

.overflow{ 
   overflow:hidden; 
   text-overflow:ellipsis;
   -webkit-text-overflow:ellipsis;
   -o-text-overflow:ellipsis;
   width:100px;
   border:1px red solid;}

text-overflow该属性IE6以上浏览器和火狐都支持，只是在safari中写成-webkit-text-overflow，在opera中写成-o-text-overflow。