郁闷的h7标签（CSS试验一）

Dec 25

Posted by iawen at 23:13 | 网页开发 | 评论(0) | 阅读(519)

今天在使用a的样式标签使用，由于在外面使用了一个"h7"标签，导致我郁闷了一个下午。
晚上回来，一步步的做了一个试验，才发现：原来IE内核的浏览器（我仅测试了IE8和Maxthon两款）不能能够支持h6以上的标题标签（不含h6)，然而FireFox则能够很好的支持这些！！

具体的测试代码如下（HTML文件）：

<!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 runat="server">
    <media >
    <title>Demo (测试CSS样式用)</title>
    <META NAME="Robots" CONTENT="all"> 
    <script type="text/javascript"></script>  
    <style type"text/css" media="all">
        
    </style>
</head>

<body>
  <div id="container">
    <ul>
        <li><a href="#">Test a:hover background style</a></li>
        <li><a class="test" href="#">Test a:hover background style(using class)</a></li>
    </ul>

<h4><a href="#">Test a:hover background style(using h4标签)</a></h4>
    <h5><a href="#">Test a:hover background style(using h5标签)</a></h5>
    <h6><a href="#">Test a:hover background style(using h6标签)</a></h6>
    <h7><a href="#">Test a:hover background style(using h7标签)</a></h7>
    <h8><a href="#">Test a:hover background style(using h8标签)</a></h8>
    </div>
</body>
<html>

配套的样式表：

body{
  font-family: Verdana;
  font-size:12px;
  margin:0px auto;
  line-height:20px;
}

div{margin:0px auto;}
ul{list-style:none;}

#container{width:900px;margin-top:15px;}

a{padding-left:15px;background:url(images/mroe.gif) no-repeat left center;}
a:hover{background:url(images/mroe_hover.gif) no-repeat left center;color:#345;}

.test{padding-left:15px;background:url(images/mroe.gif) no-repeat left center;}
.test:hover{background:#345 url(images/mroe_hover.gif) no-repeat left center;color:#fff;}

h4 a{margin-left:0px;padding-left:15px;background:url(images/mroe.gif) no-repeat left center;color:red;}
h4 a:hover{background:url(images/mroe_hover.gif) no-repeat left center;color:#874505;}

h5 a{margin-left:40px;padding-left:15px;background:url(images/mroe.gif) no-repeat left center;color:red;}
h5 a:hover{background:url(images/mroe_hover.gif) no-repeat left center;color:#874505;}

h6 a{margin-left:80px;padding-left:15px;background:url(images/mroe.gif) no-repeat left center;color:red;}
h6 a:hover{background:url(images/mroe_hover.gif) no-repeat left center;color:#874505;}

h7 a{margin-left:120px;padding-left:15px;background:url(images/mroe.gif) no-repeat left center;color:red;}
h7 a:hover{background:url(images/mroe_hover.gif) no-repeat left center;color:#874505;}

h8 a{margin-left:160px;padding-left:15px;background:url(images/mroe.gif) no-repeat left center;color:red;}
h8 a:hover{background:url(images/mroe_hover.gif) no-repeat left center;color:#874505;}

测试的效果截图（图1为Maxthon，图2为FireFox）：

作者：iawen@IaWeN's Blog
地址：http://www.iawen.com/read.php/316.htm

Favorites To:[QQ] [Sohu] [Baidu] [Google] [Yahoo] [Sina] [365Key] [yesky] [POCO]

最新日志		随机日志		综合排行
	My SQL常用... 利用Intell... 一款不错的图片缩... 在Visual ... string.F...		儿童脑力训练 3... 一些自己偶尔想到... Apex Mov... 一首喜欢的歌词：... Aleo Fla...		视频转换：视频转... PDF2Word... Foxit PD... [家庭理财] 财... 网络辅助：阿里巴...