ie7中ul不能嵌套div和li平级

我要讲一个忧伤的故事,本以为清晰的层次结构,ul里不能嵌套div和li平级,不然会乱乱乱!

代码:

<ul class="catshow">
                <li>
                    <div class="cattitle">行政区域:</div>
                    <ul class="catlist" id="province">
                        <li>北京市</li>
                        <li>天津市</li>
                        <li>河北省</li>
                        <li>陕西省</li>
                        <li>福建省</li>
                        <li>辽宁省</li>
                        <li>江苏省</li>
                        <li>安徽省</li>
                        <li>浙江省</li>
                    </ul>
                    <button id="more" class="more" onclick="show()"></button>
                    <label for="more" class="more-label">更多</label>
                </li>
                <li>
                    <div class="cattitle">文件类型:</div>
                    <ul class="catlist" id="filecat">
                        <li>法律</li>
                        <li>行政法规</li>
                        <li>部门规章</li>
                        <li>地方性法规</li>
                        <li>地方政府规章</li>
                        <li>规范性文件</li>
                    </ul>
                </li>
                <li class="catshowitem-last">
                    <div class="cattitle">工程类型:</div>
                    <ul class="catlist" id="projcat">
                        <li>现行有效</li>
                        <li>失效</li>
                        <li>尚未生成</li>
                        <li>征求意见稿</li>
                    </ul>
                </li>
            </ul>

ie高版本还可以乖乖的显示:

ie7乱得让人糟心:

百度了一下,貌似是ie低版本碰到div会解析成啥啥啥的,看了一下ie7下浏览器显示的代码,什么鬼,劳资代码明明不是这么写的,什么鸟东西。。

ps:尼玛出来什么版本浏览器你们更个新不行啊?累死你们了啊?兼容真的让人欲哭无泪啊

原文地址:https://www.cnblogs.com/junsoo-jun/p/5872057.html