0

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

我正在尝试在以下页面上制作响应式图像地图：http: //fietsklik.company12.com/index.php/how-it-works ://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）

4

1 回答 1

0

据我所知，您的图像 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;
}
于 2013-05-01T15:32:23.080 回答