这似乎是一个铬特定问题,它在Firefox中工作正常。我正在使用HTML列来模拟只有HTML和CSS的砌体布局。在谷歌浏览器HTML列导致链接移动悬停
左侧栏显示图像很好,但在右侧栏中,当您将鼠标悬停在图像上时,它们会向右移动很少量,就好像它们有悬停状态,为它们设置了左侧边框。我已经完成了“检查元素”并试图弄清楚发生了什么,但是我不知所措。
我会在下面更详细地解释发生了什么,但您可以查看实况网站here。
我在Adobe的CQ5中工作,并且创建了自定义列表类型。每个列表项目都包含以下内容,任何带有$ {}的内容都是来自CMS的变量。
的CSS是这样的:
.position{
padding-left:0.5em;
}
.list p{
line-height:1.2em;
margin: 0;
padding: 0;
}
.list div{
margin:0.5em 0 0 0.5em;
display:inline-block;
vertical-align:top;
}
.list img{
width:160px;
height:auto;
display:inline-block;
}
.custom li{
display:inline-block;
background:#F2F7F7;
width:100%;
margin-bottom: 1em;
border:1px solid #ccc;
line-height:0;
}
.custom{
-moz-column-count: 2;
-moz-column-gap: 1em;
-webkit-column-count: 2;
-webkit-column-gap: 1em;
column-count: 2;
column-gap: 1em;
width: 100%;
}
@media all and (max-width:1300px){
.custom{
-moz-column-count: 1;
-moz-column-gap: 0;
-webkit-column-count: 1;
-webkit-column-gap: 0;
column-count: 1;
column-gap: 0;
width: 100%;
}
我一直在使用Chrome浏览器的发展,所以我才意识到,这是只有当我正准备在这里发表此铬。
+0
我使用的是Chrome浏览器,并且检出了您提供的链接,我没有看到任何移动。看起来很好! –
+0
@SamThompson昨晚我刚找到解决方案,我忘了在这里添加解决方案。我会让这个标题更宽泛,现在在这里标记我的解决方案。感谢您检查它。 –