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

Update #editor class (overflow:hidden; is added):

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

Now it works for me: http://jsfiddle.net/YYgy8/10/

于 2012-12-10T08:36:02.147 に答える