0

我做错了什么还是 Firefox 不支持border-bottom属性？我正在尝试为标签提供1px dotted底部边框，<li>该标签适用于除 Firefox 之外的所有浏览器。

我正在将 CSS 类用于推荐页面。list-style-image: url(../images/quote-left.png);用于打开块引用，并且在段落结束后具有引用权以关闭引号。

HTML：

<div class="testimonial">
<ul>
    <li>testimonial 1. <img src="images/quote-right.png" /><br />
    <cite>-xxx</cite>
    </li></ul>
    <ul>
    <li>testimonial 2. <img src="images/quote-right.png" /><br />
    <cite>-xxx</cite>
    </li></ul>
    <ul>
    <li>testimonial 3. <img src="images/quote-right.png" /><br />
    <cite>-xxx</cite>
    </li></ul>
    <ul>
    <li>testimonial 4. <img src="images/quote-right.png" /><br />
    <cite>-xxx</cite>
    </li></ul>
</div>

CSS：

div .testimonial ul li {
    list-style-type: none;
    list-style-image: url(../images/quote-left.png);
    list-style-position: 0 0;
    font-family: Calibri, Arial, Helvetica, sans-serif;
    text-align: left;
    font-size: 1em;
    line-height: 1.4em;
    font-weight: normal;
    color: #000;
    border-bottom: 1 dotted #C0C0C0;
    padding: 0 0 20px 0;
    margin: 20px 0 0 0;
}
4

2 回答 2

0

如果这是一个菜单，您可以通过将样式放在A-tag 上（使用display:block）而不是LI. 另外，使用 CSS 背景，而不是 list-style-image。

.testimonial ul, li {
    list-style-type: none;
    margin:0;
    padding:0;
}

.testimonial a {
background-image: url(../images/quote-left.png);
background-repeat:no-repeat;
font-family: Calibri, Arial, Helvetica, sans-serif;
text-align: left;
font-size: 1em;
line-height: 1.4em;
font-weight: normal;
color: #000;
border-bottom: 1 dotted #C0C0C0;
padding: 0 0 20px 0;
margin: 20px 0 0 0;
}

请参阅我的教程： http: //preview.moveable.com/jm/ilovelists/

于 2012-09-20T21:11:20.707 回答
0

起初让我感到惊讶的是，Firefox 无法确定 CSS 规则的默认单位，因为您没有在边框宽度上指定它。但是，正如评论中提到的（强调我的）：

如果那里不允许使用无单位值，则应该将该属性视为无效。如果其他浏览器使用 px，则该页面处于 quirks 模式。

尝试使用它来解决您的问题：

border-bottom: 1px dotted #C0C0C0;

注意添加的px位。现在border-bottom 也可以在Firefox 中使用。请参阅此小提琴以进行现场演示。

于 2012-09-20T21:14:39.240 回答