javascript - 为什么带有 KineticJS 的 Chrome 中的边框框 3px 太长？

Question

当某些东西在 Google Chrome 中有一个 tabindex 时，它会在其周围放置一个框以显示它已被选中。然而，在 KineticJS 中，Chrome 中的边框看起来太长了 3px 并且看起来很丑。

如果 Kinetic Stage 的高度为 100px，包含 div 为 100px，Chrome 认为包含 div 的高度为 103px。

这可以在这里看到：http: //jsfiddle.net/UbxjT/

HTML：

<div id='project1' tabindex=1></div>

CSS：

#project1 {
    width: 500px;
    height: 100px;
    border: 1px solid black;
}

JavaScript：

var stage1 = new Kinetic.Stage({
    container: 'project1',
    width: '500',
    height: '100'
});

score 1 · Accepted Answer

似乎是由于 Kinetic 舞台元素与其容器的高度相同并且也是display: inline-block

拥有CSS：

.kineticjs-content {
  display: block !important;
}

将解决此问题，但我不知道这是否会导致您从未使用过 Kinetic 库的任何问题。

1 回答 1