[Quicky] block 和 inline 答案揭晓~ 另付一则,关于 word-break

Hi hi, 大家好~ 过了短短的一天我们又见面了哟~

在昨天的文章,《 [Quicky] block 和 inline 的区别是?》里,我给大家留了个问题——LI 元素到底是block level 的,还是 inline的?现在让我们来揭晓答案吧——

当当~ 恭喜Duron800同学~ 答对了哟~ 撒花~~

的确,LI 元素既不是 block level, 也不是 inline 的,因为 BODY 元素不能包含 LI 。LI 只能被 OL, UL, DIR 和MENU 这几个元素包含。其中后两个元素已经不被推荐使用了,常用的只有前两个。至于显示上,一个LI 元素默认的 display 属性一般都是 list-item (在比较旧的IE上是block),一般会被呈现成两个block box (一个是LI 的内容,一个是LI 前面的记号,比如一个小点,或者阿拉伯数字什么的)。

同样道理,DT, DD 这样的标签,因为不能被 BODY 包含,所以也会处于这种两者都不在的状态,真可怜

 

另外讲个今天发现的,关于 word-break: break-all 的小故事。请大家先看代码——

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>word-break: break-all demo</title>
<style type="text/css" media="screen">
p {
    border: 1px solid #000;
    width: 100px;
    margin: 20px;
    padding: 20px;
    font-size: 14px;
    word-break: break-all;
}
</style>
</head>
 
<body>
<!-- 首先说一下,这个演示要在IE6或IE7下看哟 =v= -->
 
<!-- 正常的word-break -->
<p>MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM</p>
 
<!-- 遇到某些标点符号就失效了 =v= -->
<p>?????????????????????????????????????????????????????????????????????????????????????????????????</p>
 
</body>
</html>

立即运行这个demo (记得要用IE哟=v=)

 

看见了吧,IE 在两个连续的标点之间,是不会正确的呈现break-all 的

其实我本人是极力反对使用break-all 这种东东的,因为作为一个样式属性,活生生地把一个单词从中截断,明显会影响这个词的意义——也就是数据——这个不应该被样式表操作的东西,于是违反了样式表将数据和表现分离的初衷。但是国内做项目么……过度需求也不是什么个别现象了

所以,在很多时候不得不使用到word-break: break-all。但是今天,被tester 的jj 一顿暴利破坏式乱打,居然测出了前面的这个东东

因为以前对这个属性没啥研究,所以特意去问 Dflying gg,这是不是IE的啥bug,结果1居然说,这个不是bug, 是feature,各么我彻底 ft =v=

据1的解释,这个是因为标点符号必须和文字分别处理造成的,但是我翻遍了架空的规范,似乎只找到了说要对CJK(即中日韩)文本的标点作特殊处理,而不考虑其他语言的。对于这个,我们只能耸耸肩,起码IE 能不完全的支持这个CSS3的属性已经很不错了。

在这里,权且写上这么一句,大家以后遇到类似问题起码有个借鉴

 

最后,向大家求个好用的Windows Live Writer 的语法高亮插件。现在我用的是一个叫 Code Snippet 的东东,但是它生成的样式和我现在的blog 实在不太合拍。不知道有没有什么插件能定制代码块的样式?或者有个方法能定制一下这个插件生成代码的样式也行。先bow了

 

那么,大家下次再见了哟~

posted @ 2008-07-04 19:31  棕熊  阅读(...)  评论(... 编辑 收藏