Question

我为我的生命找不到任何知道答案的人。

看看http://granthoneymoon.com/notifications.html，间隔图像周围有边框。现在，我可以使用空div而不是间隔图像，但我在这里使用它们来说明这一点。这也发生在其他地方。

您可以看到边框HERE的图片。

我使用了＆＃34; border：none＆＃34;有几种不同的方式，但没有区别。我的整个网站上的任何图片都没有边框。

这是HTML：

<div class="main_title">Friend Activity</div>
<div class="notifications_container"><img src="images/none.png" class="notifications_spacer"><a href="#"><img src="images/notification-prayer-0.png" class="notifications_button"></a><img src="images/none.png" class="notifications_spacer"><a href="#"><img src="images/notification-answer-2.png" class="notifications_button"></a><img src="images/none.png" class="notifications_spacer"><a href="#"><img src="images/notification-posts-1.png" class="notifications_button"></a><img src="images/none.png" class="notifications_spacer"></div>

<div class="main_title">Communication</div>
<div class="notifications_container"><img src="images/none.png" class="notifications_spacer"><a href="#"><img src="images/notifications-request-2.png" class="notifications_button2"></a><img src="images/none.png" class="notifications_spacer"><a href="#"><img src="images/notifications-comments-2.png" class="notifications_button2"></a><img src="images/none.png" class="notifications_spacer"><a href="#"><img src="images/notifications-messages-2.png" class="notifications_button2"></a><img src="images/none.png" class="notifications_spacer"></div>

这里是CSS：

img {
   border:none;
}

.notifications_container {
    width: 100%;
    max-width: 840px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 14px;
}
@media and (max-width: 799px) {
.notifications_container {
    margin-top: 0px;
}
}
@media screen and (min-width: 386px) {
.notifications_container img {
    width: 20%;
    height: auto;
}

.notifications_spacer {
    width: 10% !important;
    height: 5px !important;
    border: none !important;
}
}
@media screen and (max-width: 385px) {
.notifications_container img {
    width: 26.66%;
    height: auto;
}

.notifications_spacer {
    width: 5% !important;
    height: 5px !important;
    border: none !important;
}

}

Answer 1

不确定为什么要使用图像来分隔东西？但是...创建一个透明的gif或png并使用它而不是任何图像。 images / none.png＆lt;不存在。

Answer 2

将样式更改为：

.notifications_spacer {
    width: 10% !important;
    height: 0 !important;
    border: none !important;        
}

请注意，高度为0.这不会影响间隔图像的使用，并且高度似乎会导致轮廓。

删除讨厌的图像边框

2 个答案: