.container{
width:350px;
background-color:#ccc;
}
span.box {
display:inline;
visibility:visible;
line-height:100px;
margin:0 100px;
padding:20px 120px;
border-top: 5px solid gray;
border-bottom:5px solid black;
border-left: 5px solid gray;
border-right: 5px solid black;
background-color:gold;
}
<div class="container">
<span>BEFORE</span>
<span class="box">这是中文这是中文这是中文这是中文这是中文</span>
<span>AFTER</span>
</div>
该代码在FF下跟 CHROME下的显示有差别。但问题是:
1. 为什么会被分成是3列显示,每一列里面的文字的个数,是怎么计算出来的?
2. 该inline元素与它前后的元素之间,是怎么安排的?
FF下的显示结果:
[img]http://dl.iteye.com/upload/attachment/297519/13bdb4c3-28c4-3ee3-83d5-7ae04c8dad30.bmp[/img]
chrome下的显示结果:
[img]http://dl.iteye.com/upload/attachment/297521/7ccb61b9-9ed2-38ff-b3fe-84191c9b3367.bmp[/img]