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

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

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

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

使用 Crome 看起来很棒:

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

http://imagizer.imageshack.us/v2/800x600q90/838/8tl2.png

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

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

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

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

祝您有美好的一天,提前感谢您!

【问题讨论】:

标签: php html css wordpress


【解决方案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,它应该在所有浏览器中都很好看!

【讨论】:

  • 在 style.css 或 header.php 中?谢谢你的回答!!
  • 我设法删除,高度和浮动:左;来自 .logo 类。现在它在 Firefox 和 IE 中看起来不错,但在手机中看起来仍然很糟糕。
【解决方案3】:

从徽标中删除 float: left

例如:

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

【讨论】:

  • 移除浮动不会解决移动设备上的问题,通过调整 chrome 上的浏览​​器窗口大小进行检查。
【解决方案4】:

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

max-height: 100% !important;

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-04-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-06-15
    相关资源
    最近更新 更多