ulタグをie7とie8に対応させる方法_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ulタグをie7とie8に対応させる方法_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:25:30

オリジナル

1109 人が閲覧しました

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;        }

ログイン後にコピー

これ、ie7 および ie7 の以前のバージョンでは、display=inline-block にはこの属性がありません

ブラウザ認識されません。属性は処理されないため、そのデフォルトの属性が使用されます。そのため、テンプレートのモジュールはブロックレベルの要素として表示されます。

それで、ラインが変わります。。。

左に浮かせることができます。