Wordpress 响应式主题，徽标在浏览器中显示不同答案

【问题标题】：Wordpress Responsive theme, logo displays different in browsersWordpress 响应式主题，徽标在浏览器中显示不同
【发布时间】：2019-11-11 20:06:25
【问题描述】：

在建立网站时，我是初学者。这就是我选择使用 Wordpress 构建的原因。

问题是我的响应式主题应该适用于任何浏览器。

我通过外观>自定义>上传徽标来上传徽标。

使用 Crome 看起来很棒：

但是使用 firefox、Iphone safari 和 IE 看起来很糟糕：

我有一个 Childtheme，我输入的唯一代码是让徽标显示得更靠近中间：

    @import url("../realia/style.css");

.logo-wrapper { position: relative; left: 10%; }

为什么它看起来像这样，我尝试使用 .clearfix 代码并更改图像高度等。

祝您有美好的一天，提前感谢您！

【问题讨论】：

【解决方案1】：

只需从您的中删除height，

.logo class

Height 在调整窗口大小时也在 Chrome 上引起问题。图像无法调整大小。所以，去掉px中的高度。

祝你好运！

【讨论】：

嗨！谢谢您的回答。我觉得有点“noobie”和愚蠢，但我在哪里可以找到这个？我检查了 .css 文件并删除了高度等。但它看起来仍然一样。我可以在主 .css 文件中放一个代码来改写它吗？？
我设法删除，高度和浮动：左；来自 .logo 类。现在它在 Firefox 和 IE 中看起来不错，但在手机中看起来仍然很糟糕。
您错过了移动设备的媒体查询。我认为的设备。 "" @media only screen and (max-device-width: 768px) { /* 样式 */ .logo{max-width: 50%;} /*将 logo 调整为 50% 适合移动设备*/ }""
嗨，现在它在移动设备上看起来更好了。但它仍然有点向右推，切换菜单和徽标。
如果你看 logo 有点大，我在 CSS 中使用了以下代码：#header-wrapper #header #header-inner .navbar .navbar-inner .logo { float: none !important;高度：自动！重要；我也使用了你的代码。

【解决方案2】：

我刚刚检查了你的主题，并注意到了这个类：

#header-wrapper #header #header-inner .navbar .navbar-inner .logo {
    float: left;
    height: 90px;
    line-height: 90px;
    margin: 0;
}

去掉高度：90px，它应该在所有浏览器中都很好看！

【讨论】：

【解决方案3】：

从徽标中删除 float: left。

例如：

   #header-wrapper #header #header-inner .navbar .navbar-inner .logo {
       height: 90px;
       line-height: 90px;
       margin: 0;
   }

【讨论】：

【解决方案4】：

我最近遇到了这个问题，我的徽标在 Internet Explorer 中没有正确显示，请尝试使用此代码，希望它可以工作。

max-height: 100% !important;

【讨论】：