CSS實例：list-style-type在IE與FF中奇怪的現象解析_DIV+CSS實例

教程Tag：暫無Tag,歡迎添加,賺取U幣!

　　我們看看list-style-type在IE與FF中希奇的現象解析，我們看下面的代碼：經典論壇原文

代碼調試框 [www.zhaotila.cn]

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>MB5U</title>
<style type="text/css">
.blockcont4 {
height:277px;
border: 1px #becbcb solid;}
.olleft {
margin:6px 16px 6px 38px;
list-style-type:circle;
width:auto;}
.olleft li {
height:22px;
line-height:22px;
white-space:nowrap;
overflow:hidden;}
.olleft li a:link {
display: block;
height:22px;}
.olleft li a:hover {
background-color: red;}
</style>
</head>
<body>
<div class="blockcont4">
<ol class="olleft">
<li>Div CSS布局關于分辨率與100%自適應問題的探討！ </li>
<li>CSS基礎實例：CSS實現帶背景圖片的文字鏈接的方法 </li>
<li>DIV CSS實例教程：一款清新風格的CSS新聞列表制作  </li>
<li>CSS布局教程：如何用CSS構建圖片、文字混排的產品展示？ </li>
<li>CSS布局教程：用DIV CSS實現國內經典式三行兩列布局 </li>
<li>DIV CSS實例教程：蔚藍色的海洋 漂亮的CSS縱向菜單 </li>
<li>DIV CSS菜單實例：紅與黑 具有立體質感的CSS菜單 </li>
<li>DIV CSS橫向菜單實例：簡單的思路 陷下的風格 不錯的效果 </li>
</ol>
</div>
</body>
</html>

[ 可先修改部分代碼再運行查看效果 ]

示例代碼 [www.zhaotila.cn]

　　1、不知道為什么，以下這段代碼的列表樣式（list-style-type:circle;）在 ff 怎么也不顯示，但在 ie 中顯示正常。
　　2、display:block 在 ff 下顯示是正常的，突出顯示部分（background-color: red;}）僅加亮了字體。但在 ie 下卻把整個 li 都突出顯示了。

我們來看問題出在哪里：

　　第一個問題是因為沒有定義list-style-position，所以在FF下面列表預設標記無法顯示。
　　第二個問題是由于沒有定義A的寬度，塊元素寬度默認為整行，所以把整個li都突出有背景色了。
　　我們進行相應的修改。增加了：list-style-position: inside ;屬性。

看下面的運行效果：

代碼調試框 [www.zhaotila.cn]

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>MB5U</title>
<style type="text/css">
.blockcont4 {
height:277px;
border: 1px #becbcb solid;}
.olleft {
margin:6px 16px 6px 38px;
list-style-type:circle;
list-style-position: inside ;
width:auto;}
.olleft li {
height:22px;
line-height:22px;
white-space:nowrap;
overflow:hidden;}
.olleft li a:link {
display: block;
height:22px;}
.olleft li a:hover {
background-color: red;}
</style>
</head>
<body>
<div class="blockcont4">
<ol class="olleft">
<li>Div CSS布局關于分辨率與100%自適應問題的探討！ </li>
<li>CSS基礎實例：CSS實現帶背景圖片的文字鏈接的方法 </li>
<li>DIV CSS實例教程：一款清新風格的CSS新聞列表制作  </li>
<li>CSS布局教程：如何用CSS構建圖片、文字混排的產品展示？ </li>
<li>CSS布局教程：用DIV CSS實現國內經典式三行兩列布局 </li>
<li>DIV CSS實例教程：蔚藍色的海洋 漂亮的CSS縱向菜單 </li>
<li>DIV CSS菜單實例：紅與黑 具有立體質感的CSS菜單 </li>
<li>DIV CSS橫向菜單實例：簡單的思路 陷下的風格 不錯的效果 </li>
</ol>
</div>
</body>
</html>

[ 可先修改部分代碼再運行查看效果 ]

　　我們在IE中瀏覽沒有什么問題了，但在FF中我們發現。鏈接文字消失了，我們將A元素不設置為塊元素，此問題消失。原因未解：

代碼調試框 [www.zhaotila.cn]

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>MB5U</title>
<style type="text/css">
.blockcont4 {
height:277px;
border: 1px #becbcb solid;}
.olleft {
margin:6px 16px 6px 38px;
list-style-type:circle;
list-style-position: inside ;
width:auto;}
.olleft li {
height:22px;
line-height:22px;
white-space:nowrap;
overflow:hidden;}
.olleft li a:link {
height:22px;}
.olleft li a:hover {
background-color: red;}
</style>
</head>
<body>
<div class="blockcont4">
<ol class="olleft">
<li>Div CSS布局關于分辨率與100%自適應問題的探討！ </li>
<li>CSS基礎實例：CSS實現帶背景圖片的文字鏈接的方法 </li>
<li>DIV CSS實例教程：一款清新風格的CSS新聞列表制作  </li>
<li>CSS布局教程：如何用CSS構建圖片、文字混排的產品展示？ </li>
<li>CSS布局教程：用DIV CSS實現國內經典式三行兩列布局 </li>
<li>DIV CSS實例教程：蔚藍色的海洋 漂亮的CSS縱向菜單 </li>
<li>DIV CSS菜單實例：紅與黑 具有立體質感的CSS菜單 </li>
<li>DIV CSS橫向菜單實例：簡單的思路 陷下的風格 不錯的效果 </li>
</ol>
</div>
</body>
</html>

[ 可先修改部分代碼再運行查看效果 ]