ul,liのCSS
一、Firefoxのulの問題.ul属性に宣言がなければ、Firefoxでは右に寄るのではなく、距離を隔ててul属性にpadding:0を加える.またはpadding-left:0;に表示されます.
二、liはポイント番号を表示しない
- 基本情報
参照先:
UL、LIにfloatを加えると、IE 7でIE 8にかなりの違いがあります.
<!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>
</head>
<body>
<div>
<div>
<ul>
<li style="cursor: hand;float:left; " >
TEST1 </li>
<li style="cursor: hand;float:left; ">
TEST2 </li>
<li style="cursor: hand;float:left; ">
TEST3 </li>
<li style="cursor: hand;float:left; ">
TEST4 </li>
<li style="cursor: hand;float:left; ">
TEST5 </li>
</ul>
</div>
</div>
</body>
</html>(IE 7)
(IE
IE 7ではLIの箇条書きがキャンセルされ、IE 8では正常に表示されるが、floatであるため、後の箇条書きが前の箇条書きに上書きされる.プログラム8の模様に変更すると、
両者は同じに近づいた.
<!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>
</head>
<body>
<div>
<div>
<ul style="list-style-type:none">
<li style="cursor: hand;float:left; " >
TEST1 </li>
<li style="cursor: hand;float:left; ">
TEST2 </li>
<li style="cursor: hand;float:left; ">
TEST3 </li>
<li style="cursor: hand;float:left; ">
TEST4 </li>
<li style="cursor: hand;float:left; ">
TEST5 </li>
</ul>
</div>
</div>
</body>
</html>CSSの相違点を探してみると、多くのサイトでこのような問題があります.私たちはこのような手法を使ってページタグクラスの表示を処理しているからです.
PS:list-style-type IE 7ではliがfloatである限り完全に無視される.