html - IE 和 Firefox 中的 CSS 绝对定位问题，但 Chrome 中没有 - Wordpress 模板

Question

我修改了一个 WordPress 响应式主题，将我客户的 Logo 包含在页眉中。添加这个时，我碰到了一堆其他的 div，我正在慢慢地将它拼凑起来。

我面临的主要挑战是

#header-menu 

ID ( http://ubcf2.garyspagnoli.com ) 在某些浏览器上无法正确呈现。它固定在右侧，不再响应设计。

这是我实现的 CSS(并查看网站)，看看我是如何将它放置在 Logo 图像上的 -

#header-menu {
    bottom: 0;
    padding: 0;
    position: absolute;
    right: 0;
}

关于如何解决这个问题有什么建议吗？我不能在响应式设计中绝对定位吗？

Answer 1

删除你的h1#site-title

#header-menu{
    background-image:url('http://ubcf2.garyspagnoli.com/wp-content/uploads/2014/02/UBCF-v1.jpg');
    list-style-type:none;
    margin:0px;
    padding:0px;
}
#header-menu>li{
    float:right;
}
#header-menu>li a{
    display:block;
    padding:10px 15px;
}
#header-menu>div{
   float:clear;
}

在最后一个列表项之后添加一个 div。您可能需要反转列表项。还要尝试删除任何不必要的定位。