如何停止一组HTML数字在移动时移位

我正在为自己的空闲时间工作，这是我玩Dota2游戏的一个小选择工具。如何停止一组HTML数字在移动时移位

我倒现状整个HTML输出到一个小提琴：http://jsfiddle.net/a8T6L/

这有一个复选框列表和项目列表。这些数字都是display: table。这个想法是，当我点击一个或多个复选框时，只有拥有所选属性的项目才会显示。该功能还没有完成，所以如果你点击一个复选框，一切都会消失。只需取消选中所有内容即可再次显示。

每个项目是<figure>与和<img>和<figcaption>。本地我用一些PHP生成整个集合，我只是复制HTML/CSS/JavaScript，所以我可以做小提琴。

我试图添加一个边框，当你把鼠标悬停在一个项目上，但这是在某些情况下移动项目。

相关的CSS代码可以在小提琴在管道438中找到：

figure { 
    text-align: center; 
    display: table; 
    width: 120px; 
    height: 90px; 
    padding: 15px auto; /* not needed unless you want centered */ 
    margin-top: 5px; 
} 

figure:hover { 
    cursor: hand; 
    cursor: pointer;/*Should be good with all browsers*/ 

    border-style: inset; 
    border-color: #000; 
    border-width: 1px; 
}

我试着边距和填充（有的在代码左）玩，即使有边界崩溃，但似乎没有任何工作。我试图在这里实现的是，当我将鼠标悬停在图上时，一个插图似乎让用户知道哪个项目突出显示，甚至没有任何像素移动。只是插图出现。

我意识到我可以用background-color来代替，如果我的意图只是让用户知道哪个项目被盘旋，但我不知道这个问题的答案。

来源

2013-04-11 KoenDG

发生这种情况的原因是因为它在您悬停时在图像周围添加像素。你应该设置你的初始班级border: 1px solid transparent;，这样当你悬停时，你不是添加像素，而只是改变边框颜色。

figure { 
     text-align: center; 
     display: table; 
     width: 120px; 
     height: 90px; 
     padding: 15px auto; /* not needed unless you want centered */ 
     margin-top: 5px; 
     border: 1px solid transparent; 
    } 

    figure:hover { 
     cursor: hand; 
     cursor: pointer;/*Should be good with all browsers*/ 
     border-color: #000; 
    }

来源

2013-04-11 21:34:10 Matthew

谢谢。答案可能有时很简单:( – KoenDG 2013-04-13 15:48:09

马修是当场上的原因（+1），另一种方法是使用outline代替边框：

figure:hover { 
    cursor: hand; 
    cursor: pointer;/*Should be good with all browsers*/ 
    outline-style: inset; 
    outline-color: #000; 
    outline-width: 1px; 
}

这应该有不支持的浏览器工作的好处透明的边界（即IE6），如果你很难支持这样的老旧的东西。不利的一面是轮廓会在元素外面计算，所以如果你将这些元素靠在页面的边上，你可能会失去一部分边界。

来源

2013-04-11 21:39:14 Pebbl

的确，虽然我将在JavaScript中使用classList元素，但只支持IE10。 – KoenDG 2013-04-13 15:49:02

如何停止一组HTML数字在移动时移位

回答

相关问题