html - img 未在 Safari 中显示以尝试使 img map 响应

Question

删除 float:left 没有任何效果 :-(

我正在尝试在以下页面上使图像映射响应: http://fietsklik.company12.com/index.php/how-it-works第一张图片是 imgmap，下面是响应式版本。在 Chrome 上它似乎做我想做的事，但在 Safari 6.0.4 上，右边的三个图像不显示。请指教。

响应式“img-map”的代码如下:

<div class="hiw-container">
<img class="hiw-container-img1" src="{{media url="wysiwyg/perfectum/howitworks.jpg"}}" alt="" width="649px" height="500px" />
<img class="hiw-container-img2" src="{{media url="wysiwyg/perfectum/howitworks.jpg"}}" alt="" width="330px" height="166px" /> 
<img class="hiw-container-img3" src="{{media url="wysiwyg/perfectum/howitworks.jpg"}}" alt="" width="330px" height="166px" /> 
<img class="hiw-container-img4" src="{{media url="wysiwyg/perfectum/howitworks.jpg"}}" alt="" width="330px" height="167px" />
</div>

以及随之而来的 css:

.hiw-container {
    position: relative;
    padding-bottom: 51.02%;
    padding-top: 0px;
    height: 0;
    overflow: hidden;   
}

.hiw-container-img1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 66%;
    height: 100%;
    float: left
}

.hiw-container-img2 {
    top: 0;
    left: 0;
    width: 34%;
    height: 33%;
    float: right !important;
    padding-left: 200px;
}

.hiw-container-img3 {
    top: 0;
    left: 0;
    width: 34%;
    height: 33%;
    float: right !important;
    padding-left: 200px;
}

.hiw-container-img4 {
    top: 0;
    left: 0;
    width: 34%;
    height: 34%;
    float: right !important;
    padding-left: 200px;
}

任何可能导致 hiw-container-img2 到 img4 的图像在 Safari 中不显示的想法或建议？(使用 Safari 6.0.4)

Answer 1

据我所知，您的图像 2、3 和 4 正确地将自身调整为父图像的 34%，即 0。图像 1 没有这样做，可能是因为它是绝对定位的。相反，它会忽略所有大小调整说明(甚至是标签本身中的说明)，并简单地使其高度与其宽度成正比(行为正确)。

如果从父类中删除 height: 0;，则图像 2、3 和 4 的大小正确，但图像 1 将自身调整为原始高度的 100%(500 像素，设置在HTML)。

我的建议是不要专门设置任何图像的高度，而是让它们按比例调整大小。因为您已经在 HTML 中设置了特定的高度，所以您需要使用 height: auto; 指令覆盖它。下面的示例仅在三个侧面图像的大小调整为正好位于主图像旁边(即:它们的高度之和与主图像的高度相同)且按 34%:66% 缩放时才有效。否则，最后一张图片可能会在所有其他图片下方对齐:

.hiw-container {
    overflow: hidden;   
}

.hiw-container-img1 { 
    width: 66%;
    height: auto;
    float: left;
}

.hiw-container-img2 {
    width: 34%;
    height: auto;
    float: right;
}

.hiw-container-img3 {
    width: 34%;
    height: auto;
    float: right;
}

.hiw-container-img4 {
    width: 34%;
    height: auto;
    float: right;
}