Pourquoi la bordure est trop longue de 3px dans Chrome avec KineticJS ?

Question

Lorsque quelque chose a un index dans Google Chrome, il met une boîte autour de lui pour montrer qu'il est sélectionné. Cependant, avec KineticJS, dans Chrome, le cadre de bordure semble être 3px trop long et est laid.

Si la scène cinétique a une hauteur de 100px et que la div qui la contient a une hauteur de 100px, Chrome pense que la div qui la contient a une hauteur de 103px.

Vous pouvez le voir ici : 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'
});

Answer 1

Il semble que cela soit dû au fait que l'élément de la scène Kinetic est de la même hauteur que son conteneur et qu'il est également de la même hauteur que le conteneur. display: inline-block

Avoir le css :

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

corrigera ce problème, mais je n'ai aucune idée si cela vous causera des problèmes avec la bibliothèque Kinetic, ne l'ayant jamais utilisée.

http://jsfiddle.net/TmfpG/