找回密码
当前位置：前端开发者 > 教程 > 正文

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

2018-08-20 22:59:20 分类：教程 / 面试 阅读(107) 评论(0)
前端开发教学整套视频 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 language=”javascript” src=”js/jquery-1.4.4.min.js”></script>
    <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
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论