Question

我无法通过iOS浏览器获得SVG图像元素的background-color CSS属性。我正在使用第三代iPad（型号为MD366LL / A，iOS 6.1.3）进行测试我尝试了几个具有透明背景的SVG图像，浏览器不尊重img元素上设置的背景颜色。最终会显示祖先元素的背景颜色使用透明PNG时不会出现同样的问题。此外，我测试过的其他浏览器都尊重img元素上的背景颜色（Android浏览器，Opera，Firefox，Dolphin浏览器和Android 4.4上的Chrome; Ubuntu 13.10 x64上的Firefox和Opera）。我目前无法访问iPhone。

一些示例代码（将URI替换为img元素的src属性中的透明SVG图像）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Test</title>

        <style type="text/css">
            html, body {
                margin: 0px;
                padding: 0px;
                position: relative;
            }

            .container {
                position: relative;
                width: 100%;
                background-color: #222222;
            }

            .image {
                width: 20%;
                background-color: #888888;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <img src="image.svg" class="image">
        </div>
    </body>
</html>

这是图像元素渲染中的错误，还是我遗漏了什么？如果是一个错误，是否有一个不需要添加额外标记的解决方法？

Answer 1

无法彻底测试您的问题，但如果这是问题，您可以通过包装图片来尝试以下操作。

HTML

<div class="images">
    <img src="image.svg"/>
</div>

CSS

.images {
    background: #333;
}

.images img {
    width: 20%;
}

<强>更新

这是一种更模块化的方法，用于布置图像列表。

您可以执行以下操作：

HTML

<div class="image-list">

    <div class="image-list__item">
        <img src="image.svg"/>
    </div>

    <div class="image-list__item">
        <img src="image.svg"/>
    </div>

    <div class="image-list__item">
        <img src="image.svg"/>
    </div>

    <div class="clearfix"></div>

</div>

CSS

*, *:before, *:after {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.image-list {
    background: #333;
    padding: 12px;
}

.image-list .image-list__item {
    width: 20%;
    float: left;
    padding: 12px;
}

.image-list .image-list__item img {
    max-width: 100%;
}

.clearfix {
    clear:both;
}

DEMO或DEMO使用列表项（更多语义方法）。

iOS浏览器中不显示包含透明SVG的img元素的background-color

1 个答案: