Как избавиться от артефакта в ie?

Question

[sozercanie_kosmosa]

Как избавиться от артефакта который "чудесным" образом появляется в IE?

Вот так все выглядит:


Так выглядит HTML:

<div id="menu">
    <div class="tree-contain tree-root">
        <div class="tree-node"><img class="tree-handle"><img class="tree-checkbox"><span class="tree-name">root</span>

            <div class="tree-contain">
                <div class="tree-node"><img class="tree-handle"><img class="tree-checkbox"><span class="tree-name">child-1</span>

                    <div class="tree-contain">
                        <div val="it-1" class="tree-node"><img class="tree-checkbox"><span
                                class="tree-name">child-3</span></div>
                    </div>
                </div>
                <div class="tree-node"><img class="tree-handle"><img class="tree-checkbox"><span class="tree-name">child-2</span>

                    <div class="tree-contain">
                        <div val="it-2" class="tree-node"><img class="tree-checkbox"><span
                                class="tree-name">child-4</span></div>
                        <div val="it-3" class="tree-node"><img class="tree-checkbox"><span
                                class="tree-name">child-5</span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Так выглядит CSS:

/*handle*/
.tree-root{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
}

.tree-root>:first-child{
    margin:  0;
}

.tree-root>:last-child{
    margin:  0;
}

/*handle*/
.tree-handle {
    width: 17px;
    height: 17px;
    background-image: url("pic/node-open.png");
    cursor: pointer;
}

.tree-handle-collapse{
    width: 17px;
    height: 17px;
    background-image: url("pic/node-close.png");
}

/*node*/
.tree-node {
    margin: 2px 0 2px 0;
}

/*contain*/
.tree-contain {
    margin-left: 17px;
}

.tree-contain:not(.tree-handle):not(.tree-root){
    padding-left: 17px;
}

.tree-contain.tree-root {
    margin-left: 0;
    /*padding-left: 0;*/
}

/*checkbox*/
.tree-checkbox {
    width: 17px;
    height: 17px;
    background-image: url("pic/uncheck.png");
    cursor: pointer;
}

/*name*/
.tree-name{
    padding: 0 3px 0 3px;
    margin-left: 2px;
    cursor: default;
}

/*other*/
.tree-checked{
    width: 17px;
    height: 17px;
    background-image: url("pic/checked.png");
}

.tree-selected{
    background-color: #776d5b;
    color: #ffffff;
    outline: solid 1px #000000;
}

Answer 1

[zooks]

Почему бы не реализовать через нормальные чекбоксы?

Comments

[sozercanie_kosmosa]

если есть еще предложения, буду рад!