css - 边框图片网址无效

Question

我在图像边框方面遇到了一个非常奇怪的问题。我正在使用 MacBook Pro 10.6.8，我可以在上面安装最新的浏览器。我有一个使用图像边框的导航列表，所以:

    #navlist li 
    {   border:solid; 
        border-width: 1px 0 1px 19px; 
        -webkit-border-image:url("imgs/borderimage-nonleft-mid.png") 1 0 1 19  fill repeat stretch;
        border-image:url("imgs/borderimage-nonleft-mid.png") 1 0 1 19 fill repeat stretch;
        background: #ce0c6a;
        padding:0.5em 2em;
        display:inline-block;
    }

这在 Safari(5.1)、Firefox(33) 和 Chrome(38) 中运行良好。然后我有一个所选元素的样式，几乎相同但具有不同的 url:

    #navlist li.selected    
    {   -webkit-border-image:url("imgs/borderimage-select-mid.png") 1 19 fill repeat stretch;
        border-image:url("imgs/borderimage-select-mid.png") 1 19 fill repeat stretch;
        border-image-outset: 0 0 1px 0;
        border:solid; 
        border-width:1px 19px;
        border-image-width:1px 19px;
        background: #0fe8b5;
        font-weight: bold;
    }

这在 Safari 中运行良好。 Firefox 和 Chrome 都坚持计算出的 url 为“无”。我已经搜索了 W3C 规范，搜索了堆栈交换，用谷歌搜索了我的手指。我根本找不到原因。任何帮助将不胜感激，谢谢!

点击

Answer 1

对于您的解释，调试器从上到下滚动您的 css，首先呈现顶部的内容，然后呈现底部的内容。在你的第一个类中，你有 border: solid; 在顶部(这只会创建一个普通的边框)，但你有一个 border-image 在它下面，它将覆盖border 属性。这就是为什么您的图像可以完美显示的原因。

在您的第二堂课中，情况正好相反。您使用 border:solid; 覆盖了 border-image，因为它位于 border-image 下方。

您也可以省略“边框宽度”。

#navlist li.selected    
    {   -webkit-border-image:url("imgs/borderimage-select-mid.png") 1 19 fill repeat stretch;
        border-image:url("imgs/borderimage-select-mid.png") 1 19 fill repeat stretch;
        border-image-outset: 0 0 1px 0;
        border-image-width:1px 19px;
        background: #0fe8b5;
        font-weight: bold;
    }

这会工作得很好。