Question

在 CSS ：

中隐藏图像边框时出现问题

enter image description here

徽标是<img> - 主要<div>内的标记，我正在设置边框值：

#map-logo {
    border: none;
...
}

到<img>对象，但边框是可见的，如何在 CSS 中修复此问题？

代码和实时样本：

http://jsfiddle.net/XCdbc/

<html>
    <head>
    <title></title>
    <style type="text/css">

    body {
        background-color: #ff0000;
    }

    #map-control {
        width: 177px;
        height: 178px;
        background-image: url( 'http://s30.postimg.org/96b366cxp/image.png' );
    }

    #map-logo {
        border: none;
        margin: 0px;
        padding: 0px;
        width: 85px;
        height: 85px;
        background-image: url( 'http://s30.postimg.org/is4nmh43h/image.png' );
    }

    </style>
    </head>
    <body>
        <div id="map-control">
            <img id="map-logo" />
        </div>
    </body>
</html>

Answer 1

代码border: none无效。

应为border: 0

<强> [注]
严格来说应该是border-width: 0，因为border是border-width，border-style和border-color的简写

Answer 2

仅当border:none标记与<img>属性一起使用时，

src属性才适用。在您的情况下，您使用的是<img>代码而没有src属性。

Answer 3

尝试，

border: 0;

过去我已经知道border: none;在某些情况下不起作用，

Answer 4

确保包含doctype以确保呈现的一致性。下面的主要修改是删除img元素，用div替换它。如果您坚持使用img标签，请确保提供src属性，否则您将遇到此问题，因为渲染器不知道默认内容应该是什么（这就是为什么边框显示为内容持有者的内容应该在哪里）。

<!DOCTYPE html>
<html>
    <head>
    <title></title>
    <style type="text/css">

    body {
        background-color: #ff0000;
    }

    #map-control {
        width: 177px;
        height: 178px;
        background-image: url( 'http://s30.postimg.org/96b366cxp/image.png' );
    }

    #map-logo {
        border-width: 0;
        margin: 0px;
        padding: 0px;
        width: 85px;
        height: 85px;
        background-image: url( 'http://s30.postimg.org/is4nmh43h/image.png' );
    }

    </style>
    </head>
    <body>
        <div id="map-control">
            <div id="map-logo"></div>
        </div>
    </body>
</html>

无法隐藏CSS中图像的边框

4 个答案: