Question

我有一个问题www.eyeriss.co.uk/303/ 两者都是指我的帖子类别（ARTIST ROSTA）上的CSS

我使用CSS制作了一个网格布局，它在Firefox中运行正常但在Chrome和Safari中水平帖块相互冲突（图像空间很好，文本和元信息似乎太宽）我似乎无法在所有浏览器上修复此问题。
我似乎无法让ARTIST ROSTA的菜单项保持活动颜色，就像我在同一菜单上的页面一样......

任何身体任何提示，因为我肯定遗漏了一些我不确定的事情。

#navigation{
    margin:-18px 0 0 0;
    position:absolute;
    left:22%;
    top:45%;
    width:78%;
}

#mag-nav{ margin:0; float:left; width:100%;}

.nav {
    position:relative;
    margin:0 0 0 0;
    padding:0;
    list-style: none;
    line-height: 1;
    display:inline-block;
    float:left;
}

.nav>li>a:hover{
    text-shadow:none;
}

.nav a {
    position: relative;
    color: #FBB03B;
    display: block;
    z-index: 100;
    padding: 12px 0;
    text-decoration: none;
    text-shadow:none;
}

.nav>li>a{
    -moz-transition: all 0.2s ease-in;
    -webkit-transition: all 0.2s ease-in; 
    -o-transition: all 0.2s ease-in;
    padding:22px 20px;
    background:url(images/nav-div.png) no-repeat left;
}

.nav>li:first-child>a{
    background: none;
    padding-left:0 !important;
}

#navigation .nav>li>a{
    font-size:11px !important;
    font-weight:600 !important;
    padding:15px 10px;
    background: none;
    /*font-family:Georgia, "Times New Roman", Times, serif;
    text-transform:none;
    font-style:italic;*/
}

.nav a:hover {
    color: #FBB03B;
}

.nav a:active {
    color: #FBB03B;
}

.nav li {
    display:inline;
    position: relative;
    float:left;
    overflow: hidden;
}

.nav>li {
    margin:0;
}

.nav li ul {
    margin:2px 0 0 0;
    padding:0 0 0 0;
    width:190px;
    position: absolute;
    z-index: 999;
}

.nav li ul .sf-sub-indicator {
    background: url(../images/arrow-superfish-right.png) no-repeat;
    top: 34%;
}
.nav li ul li a {
    padding:16px 0;
    margin:0 20px;
    border-bottom:1px solid #eee;
    font-size:10px;
}

.nav li ul li:last-child a {border-bottom:none;}

.nav>li>ul{border:1px solid #ddd; margin:0 0 0 0;
    -moz-border-radius:0 0 3px 3px;-khtml-border-radius:0 0 3px 3px;-webkit-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;}

.nav>li>ul>li{width:100%;}

.nav li ul li:first-child a {
    background:none;
} 

.nav li ul li a:hover {
}

.nav li ul li a.sf-with-ul {
    padding-right: 0;
}

非常感谢

Answer 1

文字环绕

解决文本离开其容器使用word-wrap

.archivepost p {
    line-height: 2;
    margin-left: 15px;
    overflow: hidden;
    width: 210px; /*this denotes how wide easch column is and which point to cut of the text */
    word-wrap: break-word;
}

和

.archivepost li {
background: url("images/line-h-l.png") repeat-x scroll center bottom transparent !important;
float: left;
height: 350px; /* This stops the list items pushing the lower ones down */
margin: 30px 0 0;
overflow: hidden;
padding: 10px 0;
position: relative;
width: 228px;
/* word-wrap: break-word; -- Removed as its unnecessary */

}

请注意，您必须具有宽度或最大宽度，以确保文本保留在其容器内。

您也可以使用overflow:hidden;，但这样可以删除文本而不是将其推送到新行

菜单修复

确保此菜单未包含在菜单未正确处理的页面上。

.entry a, a:hover, .nav > li.current-cat > a, .nav > li.current_page_item > a {
    color:#fbb03b; 
}

或尝试

nav > li > a:active {
     color:#fbb03b; 
}

Wordpress - 在CHrome / Safari中发布网格问题而不是Firefox？

1 个答案:

文字环绕

菜单修复