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" οnclick="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