响应 HTML 在不同的浏览器中没有按预期做出反应

Question

所以我正在制作一个网站，但发生了一些奇怪的事情。

喜欢，你可以自己看，很直接；尝试将此 link 打开到 Chrome 和 Firefox（例如）。

Chrome 反应很好，而不是 Firefox。

由于这两个文件很长，我把它们粘贴到 pastebin 中：

header.php（在我的索引中称为）：http://pastebin.com/E7P9y7Dt
style.css: http://pastebin.com/AxHQQJya

有人可以帮忙吗？

提前谢谢你。固体

Answer 1

Css 您使用的属性在不同浏览器上的工作方式不同。

我检查了页面，发现了特定于徽标的问题 css

使用display: inline-block;代替display: table-cell;

最后你的标志 css 应该是

.logo {
    display: inline-block;
    padding: 5px 0;
    vertical-align: middle;
    width: 140px;
}

第 153 行

Answer 2

显然 vikrams 解决方案有效。如果出于某种原因确实需要将其显示为 table-cell，您也可以解决它以像这样在元素内部声明属性。

<div class="logo">

    <a title="ArtiTrans" href="index.html">
        <img alt="ArtiTrans" src="images/logo.png" width="100%" height="100%"></img>
    </a>

</div>

响应 HTML 在不同的浏览器中没有按预期做出反应

Responsive HTML not reacting as expected in different browsers

html

css

browser

responsive-design