Heim > Web-Frontend > HTML-Tutorial > ul标签 ie7,ie8兼容怎么搞_html/css_WEB-ITnose

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

WBOY
Freigeben: 2016-06-24 12:25:30
Original
1107 Leute haben es durchsucht

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>
Nach dem Login kopieren


回复讨论(解决方案)

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


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

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

所以会换行了。。。

你可以让它向左浮动。

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage