您的位置：首页 > 产品设计 > UI/UE

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

2008-07-04 19:31 465 查看


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>


var page = {
demo: function() {
var ifrm = window.open('about:blank','ifrm','width=300,height=300');
ifrm.document.open();
ifrm.document.write(
'\n' +
'\n' +
'' +
'' +
'word-break: break-all demo' +
'' +
'p { border: 1px solid #000; width: 100px; margin: 20px; padding: 20px; font-size: 14px; word-break: break-all; }' +
'' +
'MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM

' +
'?????????????????????????????????????????????????????????????????????????????????????????????????

' +
''
);
ifrm.document.close();
}
};

立即运行这个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了


 

那么，大家下次再见了哟~
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航