IE6的兼容性问题及解决方法

啥也不说，先上代码（有图有真相，见文底）：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>无标题文档</title>
<style type=”text/css”>
/*@set browser style:清除浏览器默认样式 */
html,body,h1,h2,h3,h4,h5,h6,hr,div,p,dl,dt,dd,ul,ol,li,form,fieldset,legend,button,iput,textarea,select,table,tr,th,td,pre,sup,address,cite,dfn,em,var,blockquote{ margin:0; padding:0}
img{ border:none;}
ul,li{ list-style:none;}
a{ text-decoration:none;}
.actFormBg{background-color:#C9F;height:25px; padding:2px 5px; background-repeat:no-repeat; float:left; margin-right:30px;}
.select94 {
background-position: -114px -42px;
cursor: pointer;
position: relative;
text-align: left;
z-index: 2;
}
.select94 input {
width: 84px;
background:none;
border:none;
color: #fff;
font: 12px/22px Verdana,Geneva,sans-serif;
height: 22px;
cursor: pointer;
text-align: center;
}
.chooseSelect94{
position: absolute; left: 0; top: 26px;
width:92px; display: none;
border-left: 1px solid #E0E0E0; border-right: 1px solid #E0E0E0;
}
.chooseSelect84 li, .chooseSelect94 li {
border-bottom: 1px solid #E0E0E0;
color:#00F;
font: 12px/2 Verdana,Geneva,sans-serif;
text-align: center;
background-color:#CCF;
/*width: 100%;*/
}
</style>
</head>
<body>
<div>
<input type=”text” value=”-省份-” />
<ul>
<li>云南</li>
<li>广东</li>
<li>四川</li>
<li>湖南</li>
<li>云南</li>
<li>广点点点东</li>
</ul>
</div>
<div>
<input type=”text” value=”-城市-” />
<ul>
<li>昭通</li>
<li>深圳</li>
<li>九寨沟</li>
<li>长沙</li>
<li>昭通</li>
<li>深圳</li>
<li>九寨沟</li>
<li>长沙</li>
</ul>
</div>
<script language=”javascript” src=”js/jquery-1.4.4.min.js”></script>
<title>欢迎来到社群网活动专区之发起活动</title>
<script type=”text/javascript”>
$(function(){
/*===============模拟下拉菜单===============*/
var flag = 0;
$(“.actFormBg input”).click(function(){
var $this = $(this);
var $thisUl = $this.siblings(“ul”);
$(“.actFormBg”).find(“ul”).hide();
if($thisUl.length !== 0){ /*判断点击表单下是否有下拉菜单*/
if($thisUl.is(“:hidden”) && flag == 0){ /*判断点击表单下的下拉菜单是否隐藏*/
$thisUl.show();
flag = 1;
$thisUl.find(“li”).click(function(){
$thisUl.siblings(“input”).attr(“value”,$(this).text());
$thisUl.hide();
});
}else{
$thisUl.hide();
}
}else{

return;
}
});

/*===============菜单展开后点击任意地方收起菜单===============*/
$(document).click(function(e){
if($(“.actFormBg”).find(“ul”).length !== 0 && flag !== 1){
$(“.actFormBg”).find(“ul”).hide();
}
flag = 0;
});
})
</script>
</body>
</html>

问题：
在用UL模拟表单中的下拉菜单的时候，点击下拉选项 LI 时值便会赋值给模拟的select，同时下拉菜单隐藏，但是在IE6下只能点击下拉菜单中文字时方可赋值成功！
而除了IE6的任何浏览器都只需点击 LI 中的任意区域即可，按理说 LI是块元素，不应该会这样，可是问题就是出现了…我也不知道为什么?有知道的记得告诉我哦~~~

解决方案：
在模拟的下拉菜单 LI 中添加样式：width: 100%; 便可解决问题，也就是我上面代码中蓝色注释的地方，把注释去掉在IE6下便可和其他浏览器一样啦啦啦~~~

本文固定链接：?https://seosir.cc/214.html?欢迎转载！

讨论区