css - 为什么这是 :after element being affected by line breaks?

Question

我有一个像这样编码的简单菜单

<ul id="main-menu" class="container">
    <li><a href="#">About Us</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">Villas & Yachts</a></li>
    <li><a href="#">Islands</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Get In Touch</a></li>       
 </ul>

看起来像这样

每个菜单项之间的小点是使用 :after 伪元素创建的。一切正常，但我还需要子菜单，它们将是嵌套列表。

问题是，当我像这样向菜单添加换行符时

<ul id="main-menu" class="container">
    <li><a href="#">About Us</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">Villas & Yachts</a>
    <!-- LINE BREAK -->
    </li>
    <li><a href="#">Islands</a>
    <!-- LINE BREAK -->
    </li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Get In Touch</a></li>       
 </ul>

我在 Safari 和 Chrome(但不是 Firefox)中得到了这个结果...

在我看来，webkit 似乎将空格视为“pre”。 :after 元素的 CSS 看起来像这样

ul#main-menu li:after
{
    content: "\00b7";
    width: 61px;
    float: right;
    text-align: center;
    border: rgba(225,225,225,0.25) 1px solid;
}

我也试过在 ul、li 和 :after 元素上设置 white-space: normal/nowrap，这不会影响任何东西。

谁能看出我哪里出错了，或者这是 Webkit/Firefox 的问题？

更新

我在 http://jsfiddle.net/zmVbH/ 创建了一个演示

Answer 1

问题是换行符是空白，这使得 float 内容掉了一行。可以通过在 </a> 之间添加一个空格来重现该问题。和 </li> .尝试制作插入内容display:inline-block而不是 float 。

ul#main-menu li:after
{
    content: "\00b7";
    width: 61px;
    display:inline-block;
    text-align: center;
    border: rgba(0,0,0,0.25) 1px solid;
    white-space: normal;        
}

已更新 JSFiddle .

操作更新

是的，inline-block 解决了这个问题，但它并不是那么简单，因为 inline-block 有一些不完善的浏览器支持。

ul#main-menu li:after
{
    content: "\00b7";
    width: 61px;
    float: right;
    text-align: center;
    border: rgba(225,225,225,0.25) 1px solid;

    /* FIX */
    display:-moz-inline-stack; /* For older versions of Firefox */ 
    display:inline-block; /* Anything that supports inline-block */

    /* IE FIX */
    zoom:1;
    *display:inline; 
}