Rumah > hujung hadapan web > html tutorial > ul标签 ie7,ie8兼容怎么搞_html/css_WEB-ITnose

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

WBOY
Lepaskan: 2016-06-24 12:25:30
asal
1107 orang telah melayarinya

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>
Salin selepas log masuk


回复讨论(解决方案)

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


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

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

所以会换行了。。。

你可以让它向左浮动。

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan