ul标签 ie7,ie8兼容怎么搞_html/css_WEB-ITnose-html教程-PHP中文网

ul标签 ie7,ie8兼容怎么搞_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 12:25:30

原创

1330人浏览过

ul标签 ie7,ie8兼容怎么搞，为什么ie7的高度会高些啊？？、不要使用。。。

代码如下：

<!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>    <title></title><style type="text/css">        a:link        {            text-decoration: none;        }        a:visited        {            text-decoration: none;        }        a:hover        {            text-decoration: underline;        }        a:active        {            text-decoration: none;        }        .cs-north-bg        {            width: 100%;            height: 100%;            background: url(themes/gray/images/header_bg.png) repeat-x;        }        .cs-north-logo        {            height: 40px;            margin: 15px 0px 0px 5px;            display: inline-block;            color: #000000;            font-size: 22px;            font-weight: bold;            text-decoration: none;        }                .ui-skin-nav        {            float: right;            padding: 0;            margin-right: 10px;            list-style: none outside none;            height: 30px;        }        .ui-skin-nav .li-skinitem        {            float: left;            font-size: 12px;            line-height: 30px;            margin-left: 10px;            text-align: center;            vertical-align: bottom;        }        .ui-skin-nav .li-skinitem span        {            cursor: pointer;            width: 10px;            height: 10px;            display: inline-block;            vertical-align: bottom;        }        .ui-skin-nav .li-skinitem span.cs-skin-on        {            border: 1px solid #FFFFFF;        }                .ui-skin-nav .li-skinitem span.gray        {            background-color: gray;        }        .ui-skin-nav .li-skinitem span.pepper-grinder        {            background-color: #BC3604;        }        .ui-skin-nav .li-skinitem span.blue        {            background-color: blue;        }        .ui-skin-nav .li-skinitem span.cupertino        {            background-color: #D7EBF9;        }        .ui-skin-nav .li-skinitem span.dark-hive        {            background-color: black;        }        .ui-skin-nav .li-skinitem span.sunny        {            background-color: #FFE57E;        }        .ui-div-clock        {            float: right;            padding: 0;            margin-right: 10px;            list-style: none outside none;            height: 30px;        }    </style></head><body><div class="cs-north-bg" style="background: #293955;">            <div class="cs-north-logo">                模板</div>            <ul class="ui-skin-nav">                <li class="li-skinitem" title="gray"><span class="gray" rel="gray"></span></li>                <li class="li-skinitem" title="pepper-grinder"><span class="pepper-grinder" rel="pepper-grinder">                </span></li>                <li class="li-skinitem" title="blue"><span class="blue" rel="blue"></span></li>                <li class="li-skinitem" title="cupertino"><span class="cupertino" rel="cupertino"></span>                </li>                <li class="li-skinitem" title="dark-hive"><span class="dark-hive" rel="dark-hive"></span>                </li>                <li class="li-skinitem" title="sunny"><span class="sunny" rel="sunny"></span></li>            </ul>        </div></body></html>

登录后复制

回复讨论(解决方案)

.cs-north-logo        {            height: 40px;            margin: 15px 0px 0px 5px;            display: inline-block;            color: #000000;            font-size: 22px;            font-weight: bold;            text-decoration: none;        }

登录后复制

这个里面的display=inline-block，ie7和ie7之前的版本，是没有这个属性的

浏览器对于不识别的属性，都是不作处理的，所以使用了它默认的属性，所以你那边模板的模块，是以块级元素显示的。

所以会换行了。。。

你可以让它向左浮动。