亚洲大片黄在线观看私人影院,另类重口特殊av无码

您當前所在位置：首頁 → 網(wǎng)絡編程 → DIVCSS → CSS實例：list-style-type在IE與FF中奇怪的現(xiàn)象解析-CSS布局實例

CSS實例：list-style-type在IE與FF中奇怪的現(xiàn)象解析-CSS布局實例 時間：2015/6/28來源：IT貓撲網(wǎng)作者：網(wǎng)管聯(lián)盟我要評論(0)

我們看看list-style-type在IE與FF中希奇的現(xiàn)象解析，我們看下面的代碼：經(jīng)典論壇原文

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://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實現(xiàn)帶背景圖片的文字鏈接的方法 </li>
<li>DIV CSS實例教程：一款清新風格的CSS新聞列表制作 </li>
<li>CSS布局教程：如何用CSS構(gòu)建圖片、文字混排的產(chǎn)品展示？ </li>
<li>CSS布局教程：用DIV CSS實現(xiàn)國內(nèi)經(jīng)典式三行兩列布局 </li>
<li>DIV CSS實例教程：蔚藍色的海洋漂亮的CSS縱向菜單 </li>
<li>DIV CSS菜單實例：紅與黑具有立體質(zhì)感的CSS菜單 </li>
<li>DIV CSS橫向菜單實例：簡單的思路陷下的風格不錯的效果 </li>
</ol>
</div>
</body>
</html>

Example Source Code

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

我們來看問題出在哪里：

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

看下面的運行效果：

Source Code to Run

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://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實現(xiàn)帶背景圖片的文字鏈接的方法 </li>
<li>DIV CSS實例教程：一款清新風格的CSS新聞列表制作 </li>
<li>CSS布局教程：如何用CSS構(gòu)建圖片、文字混排的產(chǎn)品展示？ </li>
<li>CSS布局教程：用DIV CSS實現(xiàn)國內(nèi)經(jīng)典式三行兩列布局 </li>
<li>DIV CSS實例教程：蔚藍色的海洋漂亮的CSS縱向菜單 </li>
<li>DIV CSS菜單實例：紅與黑具有立體質(zhì)感的CSS菜單 </li>
<li>DIV CSS橫向菜單實例：簡單的思路陷下的風格不錯的效果 </li>
</ol>
</div>
</body>
</html>

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

Source Code to Run

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://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實現(xiàn)帶背景圖片的文字鏈接的方法 </li>
<li>DIV CSS實例教程：一款清新風格的CSS新聞列表制作 </li>
<li>CSS布局教程：如何用CSS構(gòu)建圖片、文字混排的產(chǎn)品展示？ </li>
<li>CSS布局教程：用DIV CSS實現(xiàn)國內(nèi)經(jīng)典式三行兩列布局 </li>
<li>DIV CSS實例教程：蔚藍色的海洋漂亮的CSS縱向菜單 </li>
<li>DIV CSS菜單實例：紅與黑具有立體質(zhì)感的CSS菜單 </li>
<li>DIV CSS橫向菜單實例：簡單的思路陷下的風格不錯的效果 </li>
</ol>
</div>
</body>
</html>

關鍵詞標簽：實例,解析,布局,現(xiàn)象,

相關閱讀

文章評論

查看所有0條評論>>