Header的css不能在Chrome和Opera中运行--你有什么办法修复它吗?

时间:2018-12-03 作者:kacper3355

我正在创建一个Wordpress网站,但我对桌面版的Chrome和Opera有一个问题-我的标题在这里显示不同(在所有其他浏览器中,一切都很好)。

以下截图显示了我的意思:

Firefox:https://i.imgur.com/4U11dfN.png (一切正常)Chrome(在Opera中看起来都一样):https://i.imgur.com/kkyeklc.jpg (菜单项未正确对齐)。

这是我的网站:http://tophistorie.pl/

你们知道会出什么问题吗?我迫切需要帮助——花了两个小时试图解决这个问题。

卡斯帕

2 个回复
SO网友:Frank P. Walentynowicz

尝试对CSS进行此更改。替换:

.site-title a img{
    padding-bottom:8px;
    padding-top:8px;
    height:50px;
}
使用:

.site-title a img {
    padding-bottom: 8px;
    padding-top: 8px;
    height: 50px;
    position: relative;
    z-index: 9;
}

li.menu-item-1924 {
    margin-left: 130px;
}
解释添加margin-left: 130px; 到第一个菜单项,将从GMNG图像向右移动菜单。图像和菜单仍将重叠,因此z-index: 9; 将图像置于菜单上方。对于z-index 为了工作,position: relative; 是必需的。

SO网友:Nathaniel Flick

您希望导航无序列表包含您的徽标,然后它会占用其他导航项目的空间,而不是通过使用导航列表上的左边距来伪造它,您随后必须对其进行补偿,以使您的导航响应。

<ul>
    <li>Logo here</li>
    <li>Nav item here</li>
    <li>Nav item here</li>
    <li>Nav item here</li>
</ul>
查看codepen上的代码,它比我在这里发布的答案更具描述性:

https://codepen.io/dirtandrust/pen/MzRaQQ

相关推荐

在带有PHP的子主题中包含style.css

在里面https://codex.wordpress.org/Child_Themes 这是包含样式的最佳实践。css在子主题中,必须将下面的代码放入函数中。php的子主题,但将“父样式”替换为可以在函数中找到的父主题的参数。父主题的php。我在我的主题文件中找不到它,那里也没有多少代码。使用@import包含父主题样式表的方法不适用于我,放入文件的css不会在任何浏览器的站点上显示自己。function my_theme_enqueue_styles() { $parent_s