0

JSFIDDLE

从jsfiddle链接可以看出问题：设置了一定粗细的边框，但是一般不会出现（只出现在hoover上）...

同时，当不涉及边界时，相同的结构没有问题。（JSFIDDLE 示例 2）

这是代码： CSS

.DarkText {
    margin: 0;
}
.DarkText ul {
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 5px 5px 5px 5px;
    display: inline-block;
}
.DarkText a {
    text-decoration: none;
    font-family:'Segoe UI', 'Century Gothic', sans-serif;
    font-size: 14px;
    color: #545353;
    vertical-align: text-top;
}
.DarkText h2 {
    text-shadow: -1px 1px 1px #3D3D3D;
    font-weight: bolder;
    color: #545353;
    padding: 5px 5px 5px 5px;
    margin: 0;
    font-size: 20px;
    line-height: 21px;
    text-align: left;
    font-family:'Segoe UI light', 'Century Gothic', sans-serif;
    vertical-align: text-top;
}
.DarkText p {
    padding: 5px 5px 5px 5px;
    font-family:'Segoe UI', 'Century Gothic', sans-serif;
    font-size: 14px;
    color: #545353;
    vertical-align: text-top;
    text-align: justify;
}
.DarkText .TwoBoxesDark li {
    width: 30.5%;
    height: 145px;
    float: left;
    margin: 0 0 2% 2%;
    border: 1px solid transparent;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
}
.DarkText .orangeborder
{
    border-color: #D6D6D6;
    border-left: 10px solid #ff6a00;
    background-color: #D6D6D6;
    background: #D6D6D6;
    background: -moz-linear-gradient(top, #F2F2F2 0%, #D6D6D6 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F2F2F2), color-stop(100%, #D6D6D6));
    background: -webkit-linear-gradient(top, #F2F2F2 0%, #D6D6D6 100%);
    background: -o-linear-gradient(top, #F2F2F2 0%, #D6D6D6 100%);
    background: linear-gradient(to bottom, #F2F2F2 0%, #D6D6D6 100%);
}
.DarkText .orangeborder:hover
{
    border-color: #D6D6D6;
    border-left: 10px solid #ff6a00;
    background-color: #D6D6D6;
    background: #D6D6D6;
    background: -moz-linear-gradient(top, #D6D6D6 0%, #F2F2F2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #D6D6D6), color-stop(100%, #F2F2F2));
    background: -webkit-linear-gradient(top, #D6D6D6 0%, #F2F2F2 100%);
    background: -o-linear-gradient(top, #D6D6D6 0%, #F2F2F2 100%);
    background: linear-gradient(to bottom, #D6D6D6 0%, #F2F2F2 100%);
}

HTML

<div class="DarkText">
    <ul class="TwoBoxesDark">
        <li class="orangeborder">
            <h2>Sample Title</h2>
            <p>This is just a sample paragraph</p>
        </li>
    </ul>
</div>
4

3 回答 3

3

.DarkText .orangeborder

“.DarkText .orangeborder”的左边框被“.DarkText .TwoBoxesDark li”的边框覆盖。

改变

.DarkText .orangeborder

至

.DarkText li.orangeborder

或者

.DarkText .TwoBoxesDark li.orangeborder

将工作。

于 2013-06-10T14:15:43.097 回答
2

它只出现在悬停时，因为它在这里被覆盖：

.DarkText .TwoBoxesDark li {
            width: 30.5%;
            height: 145px;
            float: left;
            margin: 0 0 2% 2%;
            border: 1px solid transparent;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            cursor: pointer;
        }

注释掉border: 1px solid transparent;

于 2013-06-10T14:14:53.357 回答
1

在你的第一个小提琴中，你有：

    .DarkText .orangeborder:hover
    {
        border-color: #D6D6D6;
        border-left: 10px solid #ff6a00;

所以它在悬停时添加了一个左边框。

于 2013-06-10T14:11:49.750 回答