Question

在我的三星星系3上，图像周围有一个不需要的边框。您可以在图片here中看到一个示例。

您可以看到用作分隔符的空白图像周围有边框。此边框不会显示在台式PC或任何其他broswer上。当然，我可以通过使用空div而不是空白图像作为分隔符来解决它，但我需要找到它为什么这样做，因为它在其他时候也是一个问题。

你可以看到问题的另一个例子here.在这种情况下，它是背景图像，它有一个不需要的灰色边框，它穿过标签的中间。

以下是第一个示例的HTML：

<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：

.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;
}
}
@media screen and (max-width: 385px) {
.notifications_container img {
    width: 26.66%;
    height: auto;
}

.notifications_spacer {
    width: 5% !important;
    height: 5px !important;
}
}
.notifications_button, .notifications_button2 {
    -webkit-transition: all 0.0s;
    transition: all 0.0s;
}
.notifications_button:hover, .notifications_button:active, .notifications_button2:hover, .notifications_button2:active {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
}
.notifications_button2 {
    margin-top: -10px;
}

Answer 1

您只需使用

即可

     <a href="#">    
      <img src="images/notifications-comments-2.png" class="notifications_button2" border="0">
     </a>

Answer 2

img {
   border:none !important;
}

// here you can try 

.notifications_container img {
    border:none !important;
    width: 20%;
    height: auto;
}

Answer 3

.notifications_container > img {
    border:none !important;
    width: 20%;
    height: auto;
}

图像周围有多少边框？

3 个答案: