前端开发者前端开发教学整套视频 web前端开发页面跳转 前端开发的面试范文
<!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 class=”actFormBg select94″>
<input type=”text” value=”-省份-” />
<ul class=”chooseSelect94″>
<li>云南</li>
<li>广东</li>
<li>四川</li>
<li>湖南</li>
<li>云南</li>
<li>广点点点东</li>
</ul>
</div>
<div class=”actFormBg select94″>
<input type=”text” value=”-城市-” />
<ul class=”chooseSelect94″>
<li>昭通</li>
<li>深圳</li>
<li>九寨沟</li>
<li>长沙</li>
<li>昭通</li>
<li>深圳</li>
<li>九寨沟</li>
<li>长沙</li>
</ul>
</div>
<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下便可和其他浏览器一样啦；
前端页面开发一个页面多少钱 as3前端开发面试题 web前端开发需要多久
» 本文来自：前端开发者 » 《WEB开发IE6的兼容性问题及解决方法》
» 本文链接地址：https://www.rokub.com/5329.html
» 您也可以订阅本站：https://www.rokub.com
评论前必须登录！
注册