位置：首页>> 网络编程>> 网页设计>> CSS 那些事儿

CSS 那些事儿

作者：荆棘鸟　来源：荆棘鸟's Blog　发布时间：2008-12-02 18:19:00　

标签：css,背景,兼容,排版,标准

一、避免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 超长隐藏 */

投稿

CSS 那些事儿

猜你喜欢