Question

我正在使用WordPress Boilerplate作为基础（HTML5 Boilerplate +另一个WordPress基本主题）处理WordPress主题。可以在这里看到：

JaredSartin.com（主题正在进行中，不介意其他一些混乱：P）

在Chrome中看起来很不错，但顶级图片在所有其他浏览器中都搞砸了。我正在分层2个图像重叠，所以我可以有一个响应式设计，删除后面的图像，并在浏览器达到一定宽度时只留下标题。

图像绝对定位，顶部有一个百分比 - 顶部和边距 - 以正确定位。它们都设置为通过页面缩放

height:auto;
width:100%;

OR

width:85%;

在顶部图片的情况下。现在，我在Chrome中工作以产生当前外观，左边距在我测试过的所有浏览器中都很好（Windows上的FF和IE7 / IE8），但顶部关闭。在FF的检查员中，我发现调整后的最高利润率需要达到7.5％（比我在铬合金中设定的更有意义--24.5％）。

跨浏览器的任何想法修复？我不想使用特定的浏览器检测（如Chrome vs Other）。我已经有了一些重置样式。

修改

我有一个修复/黑客，但如果你有一个更好的（不是那么hacky，但只是简单的跨浏览器CSS），请告诉我...

header img#titleimgfront{
    width: 85%;
    margin-top: 7.5%; /* For non-webkit browsers */
    margin-left: 8.5%;
}

/* unfortunate hack since Webkit has an issue with Margin-top */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  header img#titleimgfront{
    margin-top: 24.6%;
  }
}

Answer 1

你正在做的事情没有任何问题 - 这是Webkit中的一个错误，它从绝对定位元素的高度计算一个百分比margin-top，其他浏览器（和规范）从宽度。（见：https://lists.webkit.org/pipermail/webkit-unassigned/2011-February/293573.html）

在元素的宽度上设置margin-top和margin-bottom值似乎是违反直觉的，但这就是它的方式。

但是你找到了一个有效的解决方法，所以你已经排序了。不要觉得你的布局导致了这个问题，因为它不是，它只是Webkit。

Answer 2

将此代码放在主题信息正下方style.css的顶部，它应解决大多数跨浏览器问题：

/*------------------------------------------------*/
/*-----------------[RESET]------------------------*/
/*------------------------------------------------*/

/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em; font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
fieldset,img,hr {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}

Answer 3

您使用绝对定位会失去边距并使用顶部，右侧，底部或左侧。

header img#titleimgfront{
top: 25%;

}

虽然这不是你的问题的答案，只是建议。

您的简单标题图片过于复杂。我没有重点和排列3张图片。

只需使用1个透明的png并在你的WordPress header.php

中

<header>
    <a href="<?php bloginfo('home'); ?>"><img src="http://path_to_image.png" width="800" height="240" class="logo" /></a>
</header>

的CSS：

.logo {
    margin: 20% auto;
}

如果您要使用HTML 5，请删除所有额外的div和内容。你不需要身体或额外的包装。

只需使用<section <?php body_class(); ?>>。

Answer 4

添加top_margin类以修复上边距问题

$('.top_margin').each(function () {
            var $item = $(this),
                marginTop = 0,
                newMarginTop = 0,
                pageWidth = $item.parent().innerWidth();
            //hide to obtain percentage value instead of calculated px value
            $item.hide();
            marginTop = parseFloat($item.css('margin-top')) / 100;
            newMarginTop = Math.round(self.pageWidth * marginTop) + 'px';
            $item.css('margin-top', newMarginTop);
            console.log('old: ' + marginTop + ', new: ' + newMarginTop);
            $item.show();
        });

从Chrome到其他浏览器的边缘差异

4 个答案: