Question

我正在构建一个“添加标记”小部件，我在IE7中触发单击处理程序时遇到问题。小部件的工作方式几乎与在Stack Overflow中添加标签完全一样......当您键入时，它会建议标签。当用户点击“添加标签框”时，文本输入需要聚焦。我的代码适用于除IE7之外的所有浏览器...由于某种原因，点击处理程序未被触发。我觉得它与我的CSS和/或HTML以及IE7中的盒子模型问题有关。

这是我的jsfiddle :(使用IE并打开IE7（浏览器和文档）

http://jsfiddle.net/YYgy8/2/

以下是标记的示例：

<div id="tags">
    <div id="editor">
        <ul id="taglist">
            <li class="tag">
                <span class="tagname">Tag1</span>
            </li>
            <li class="tag">
                <span class="tagname">Tag2</span>
            </li>
            <li id="tag-editor">
                <input type="text" id="tag-editor-input">
            </li>
        </ul>
        <div class="clear"></div>
    </div>
</div>

使用jquery，我在编辑器中添加一个点击处理程序，应该关注文本输入：

$('#editor').click(function(){
    $('#tag-editor-input').focus();
    alert ('click!');
});

这是我的CSS：

#tags {margin:1em;}
#editor {
    border:1px solid #ccc; background-color:#fff;
    padding:0.2em 0.4em;
    margin-bottom:1em;
}
#taglist {
    list-style:none; padding:0; margin:0;
}
#taglist > li {
    margin:2px 5px 2px 0; 
    float:left;
}
.tag {
    padding:0.2em; 
    border:1px solid #ccc; 
    background-color:#F2F1B3;
    margin-right:5px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    font-size:1em;
    line-height:1.3em;
    position:relative;
}
.tagname {
    display:block;
    max-width:100px;
    min-width:30px;
    white-space: nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
#tag-editor {
    border:1px solid #eee;
}
#tag-editor-input {
    border:0; 
    padding:0.2em; 
    font-size:1em; 
    line-height:1.3em; 
    width:10px; 
    max-width:100px; 
    min-width:10px;
    -webkit-text-size-adjust: none;
    outline:none;
}

.clear {clear:both;}

Answer 1

更新#editor课程（overflow:hidden;已添加）：

#editor {
    border:1px solid #ccc; background-color:#fff;
    padding:0.2em 0.4em;
    margin-bottom:1em;
    overflow:hidden;
}

现在它对我有用： http://jsfiddle.net/YYgy8/10/

jQuery - click（）不会在div元素的IE7中触发

1 个答案: