CSS 那些事儿
作者:荆棘鸟 来源:荆棘鸟's Blog 时间:2008-12-02 18:19:00
一、避免Firefox 背景图不显示的兼容问题,定义background 属性,先后顺序不能随意变动。
background : background-color || background-image || background-repeat || background-attachment || background-position
示例:
div { background: red no-repeat scroll left center }
二、IE图文混排,li 多出空白间距兼容问题,定义li display: block; height=高度值。
三、一般排版尽可不用margin,避免ie firefox双倍边距兼容问题。
竖向空白间距,采用双层div嵌套,用外层div 的padding 值控制版块的栏间距,内层div 控制版块实际宽度样式。
横向空白间距,用专门的div空白行代替,如
<div class="blankline">
四、尽量不用css hack,以免新的浏览器出来,出现新的兼容性问题。
五、命名标准
一律小写;
尽量用英文;
不加中杠和下划线;
尽量不缩写,除非一看就明白的单词。
六、用空白行代替竖向间距margin,不设height 值,为了避免IE6的height最小值为设定的字号高度问题。
<div class="blankline"></div>
.blankline
padding-top: 5px;
}
如果设为 height: 5px; IE6下高度就会变为所设定的字体高度,远大于5px。
七、color 必须设定在font 定义之后,否则定义不起作用。
font-size: 100%;
font-weight: bolder;
color: #555555;
八、换行控制。
word-wrap 控制换行 { break-word 强制换行 }
word-break 控制断词 { break-all 换行时折分字母 keep-all 换行时英文按词换行,中文按句从有标点符号处换行 */
下图是使用keep-all属性,对于英文内容使用较好,可以换单词换行,不折单词中的字母,如果是中文,则从有标点符号处换号,使中文版面看起来较乱。所以,中文建议用break-all,英文用keep-all 。
对于Firefox,长串英文不能自动换行,对此网上有JS解决办法,但是对于小网站为这点小毛病兴师动众有些划不来,超长部分就用overflow: hidden;隐藏起来好了。
如果你是完美主义者,也可以看看老外的解决方案:
http://www.hedgerwow.com/360/dhtml/css-word-break.html
最后总结一下:兼容IE和Firefox的换行问题的CSS方法是:
table-layout: fixed; /* 防止撑开IE表格 */
word-wrap: break-word; /* 强制换行 */
word-break: break-all; /* 按字母折分 */
overflow: hidden; /* Firefox 超长隐藏 */