Question

我创造了一个在线即时通讯工具，在理论上工作得很好（编程就是现场），但视觉效果不足，即6和7。

基本今天我已经决定将其剥离并重新开始，但仍然遇到链接/按钮的相同问题，显示联系人jumbs 5px点击时。我只是想不出来。

http://www.actwebdesigns.co.uk/ACT_instant_messenger

上有一个小小的演示

html主要是：

<div id="im_wrapper_fixed">
<div id="im_sub_wrapper">
    <div id="chat_con_wrapper">
    </div>
    <ul id="contacts_box">
        <li id="trigger_details">
            <ul class="trigger" id="trigger_wrapper">
                <li style="height: 1%;">
                    <ul>
                        <li id="contacts_header_bar">
                            <span>Contacts</span>
                        </li>
                        <li id="contacts_details">
                            <ul>
                                <li id="user_name"><strong>e-jackson</strong></li>
                                <li id="user_status">Status: Online</li>
                                <li id="option_buttons"><a id="force_offline" href="#"><img height="15" width="15" alt="Set Offline" src="../IM/images/red-beacon.jpg"></a><a id="force_away" href="#"><img height="15" width="15" alt="Set Away" src="../IM/images/orange-beacon.jpg"></a><a id="force_online" href="#"><img height="15" width="15" alt="Set Online" src="../IM/images/green-beacon.jpg"></a></li>
                            </ul>
                        </li>
                        <li id="contacts_list">
                            <ul>
                                <li class="contact"><em>no contacts online</em></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li id="contacts_trigger_wrapper">
            <a href="#" id="contacts_trigger">(0) contacts</a>
        </li>
    </ul>
    <div class="clear"></div>
</div>

和联系人框的CSS：

/* CONTACTS LIST BOX */
#contacts_box { font-size:12px; width:200px; display:inline; float:left; text-align:left; height:305px; overflow:hidden; }
#contacts_header_bar { width:198px; height:15px; overflow:hidden; background-color:#39C; margin:0; padding:0;  }
#contacts_details { width:198px; height:55px; overflow:hidden; border:1px solid #404040; border-left:none; border-right:none; background-color:#F90; }
#contacts_list { height:240px; overflow:auto; background-color: #FCC;  }
#contacts_list ul { }
#contacts_list li { }
#contacts_list li a, #contacts_list li a:visited, #contacts_list li a:hover { text-decoration:none; color:#404040; display:block;  }
#contacts_list li a:hover { cursor:pointer; }
#contacts_list li span.con_name { display:block; width:145px; }
#contacts_list li span.con_status {}
#trigger_details { display:block; height:273px; border:1px solid #404040; background-color:#0C3; }
#trigger_wrapper { height:203px; width:198px; overflow:hidden;  }
#contacts_trigger_wrapper { width:198px; height:28px; border:1px solid #404040; background-color:#F4F4F4; }
#contacts_trigger { display:block; }
#contacts_trigger:active, #contacts_trigger:visited, #contacts_trigger:hover { color:#404040;  }
#force_online, #force_offline, #force_away { font-size:10px; text-decoration:none; color:#404040; width:15px; height:15px; display: block; float:left; margin-top:3px; }
#contacts_box #trigger_details .trigger { display:none; }

非常感谢任何帮助。

Answer 1

这不是一个真正的解决方案，但我使用div而不是ul和li重新构建。

在ie6和7中跳转链接

1 个答案: