2

我正在构建一个“添加标签”小部件，但在让点击处理程序在 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;}
4

1 回答 1

3

更新#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/

于 2012-12-10T08:36:02.147 回答