一段在IE8,Chrome下正常的CSS,在IE6下不正常,高分求高手
各位,给高分,帮我修改下这个样式,能适合到IE6下,我对CSS不太熟悉,谢谢!
=============================================================================================
在IE8和IE6的效果
=============================================================================================

=============================================================================================
HTML
=============================================================================================
<body>
<div id="BlockWithNumber" class="row-fluid">
<a id="stationNum1" title="6 new members." class="well span3 top-block" href="#">
<span class="icon32-red"></span>
<div >站点规模</div>
<div id="stationNum">N/A</div>
<span id="stationNum2" class="notification">N/A</span>
</a>
<a id="bigStationNum1" title="4 new pro members." class="well span3 top-block" href="#">
<span class="icon32-icon-star-on"></span>
<div>机房总数</div>
<div id="bigStationNum">N/A</div>
<span id="bigStationNum2" class="notification green">N/A</span>
</a>
<a id="smallStationNum1" title="$34 new sales." class="well span3 top-block" href="#">
<span class="icon32-compose"></span>
<div>基站总数</div>
<div id="smallStationNum">N/A</div>
<span id="smallStationNum2" class="notification yellow">N/A</span>
</a>
<a id="muNum1" title="12 new messages." class="well span3 top-block" href="#">
<span class="icon32-envelope-closed"></span>
<div>采集器总数</div>
<div id="muNum">N/A</div>
<span id="muNum2" class="notification red" >N/A</span>
</a>
</div>
</body>
=============================================================================================
引用的样式
=============================================================================================
/*链接样式*/
a {
color: #369bd7;
text-decoration: none;
}
a:hover {
color: #2071a1;
text-decoration: underline;
}
.row-fluid {
width: 100%;
*zoom: 1;
}
.row-fluid:before,
.row-fluid:after {
display: table;
content: "";
}
.row-fluid:after {
clear: both;
}
.row-fluid [class*="span"] {
display: block;
width: 100%;
min-height: 28px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
float: left;
margin-left: 2.127659574%;
*margin-left: 2.0744680846382977%;
}
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
.row-fluid .span12 {
width: 99.99999998999999%;
*width: 99.94680850063828%;
}
.row-fluid .span11 {
width: 91.489361693%;
*width: 91.4361702036383%;
}
.row-fluid .span10 {
width: 82.97872339599999%;
*width: 82.92553190663828%;
}
.row-fluid .span9 {
width: 74.468085099%;
*width: 74.4148936096383%;
}
.row-fluid .span8 {
width: 65.95744680199999%;
*width: 65.90425531263828%;
}
.row-fluid .span7 {
width: 57.446808505%;
*width: 57.3936170156383%;
}
.row-fluid .span6 {
width: 48.93617020799999%;
*width: 48.88297871863829%;
}
.row-fluid .span5 {
width: 40.425531911%;
*width: 40.3723404216383%;
}
.row-fluid .span4 {
width: 31.914893614%;
*width: 31.8617021246383%;
}
.row-fluid .span3 {
width: 22.404255317%;
*width: 22.3510638276383%; /*width: 23 修改为22*/
}
.row-fluid .span2 {
width: 14.89361702%;
*width: 14.8404255306383%;
}
.row-fluid .span1 {
width: 6.382978723%;
*width: 6.329787233638298%;
}
.well {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #eee;
border: 1px solid rgba(0, 0, 0, 0.05);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.notification
{
display: block;
position: absolute;
top: -10px;
right: -5px;
line-height: 16px;
height: 16px;
padding: 0 5px;
font-family: Arial, sans-serif;
color: white !important;
text-shadow: 0 1px
hsla(0, 0%, 0%, 0.25);
border-width: 1px;
border-style: solid;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-box-shadow: 0 1px 1px
hsla(0, 0%, 0%, 0.08), inset 0 1px
hsla(0, 100%, 100%, 0.3);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08), inset 0 1px rgba(255, 255, 255, 0.3);
box-shadow: 0 1px 1px
hsla(0, 0%, 0%, 0.08), inset 0 1px
hsla(0, 100%, 100%, 0.3);
}
.notification {
border-color: #2FABE9;
background-color: #67C2EF;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, hsl(200, 80%, 82%)), color-stop(100%, hsl(200, 81%, 67%)));
background-image: -webkit-linear-gradient(top, hsl(200, 80%, 82%), hsl(200, 81%, 67%));
background-image: -moz-linear-gradient(top, hsl(200, 80%, 82%), hsl(200, 81%, 67%));
background-image: -ms-linear-gradient(top, hsl(200, 80%, 82%), hsl(200, 81%, 67%));
background-image: -o-linear-gradient(top, hsl(200, 80%, 82%), hsl(200, 81%, 67%));
background-image: linear-gradient(top, hsl(200, 80%, 82%), hsl(200, 81%, 67%));
}
.notification.green {
border-color: #5AAD34;
background-color: #78CD51;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, hsl(101, 54%, 71%)), color-stop(100%, hsl(101, 55%, 56%)));
background-image: -webkit-linear-gradient(top, hsl(101, 54%, 71%), hsl(101, 55%, 56%));
background-image: -moz-linear-gradient(top, hsl(101, 54%, 71%), hsl(101, 55%, 56%));
background-image: -ms-linear-gradient(top, hsl(101, 54%, 71%), hsl(101, 55%, 56%));
background-image: -o-linear-gradient(top, hsl(101, 54%, 71%), hsl(101, 55%, 56%));
background-image: linear-gradient(top, hsl(101, 54%, 71%), hsl(101, 55%, 56%));
}
.notification.yellow {
border-color: #F4A506;
background-color: #FABB3D;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, hsl(40, 95%, 76%)), color-stop(100%, hsl(40, 95%, 61%)));
background-image: -webkit-linear-gradient(top, hsl(40, 95%, 76%), hsl(40, 95%, 61%));
background-image: -moz-linear-gradient(top, hsl(40, 95%, 76%), hsl(40, 95%, 61%));
background-image: -ms-linear-gradient(top, hsl(40, 95%, 76%), hsl(40, 95%, 61%));
background-image: -o-linear-gradient(top, hsl(40, 95%, 76%), hsl(40, 95%, 61%));
background-image: linear-gradient(top, hsl(40, 95%, 76%), hsl(40, 95%, 61%));
}
.notification.red {
border-color: #FA5833;
background-color: #FA603D;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, hsl(11, 95%, 76%)), color-stop(100%, hsl(11, 95%, 61%)));
background-image: -webkit-linear-gradient(top, hsl(11, 95%, 76%), hsl(11, 95%, 61%));
background-image: -moz-linear-gradient(top, hsl(11, 95%, 76%), hsl(11, 95%, 61%));
background-image: -ms-linear-gradient(top, hsl(11, 95%, 76%), hsl(11, 95%, 61%));
background-image: -o-linear-gradient(top, hsl(11, 95%, 76%), hsl(11, 95%, 61%));
background-image: linear-gradient(top, hsl(11, 95%, 76%), hsl(11, 95%, 61%));
}
.top-block{
font-size:14px;
text-align: center;
padding: 5px;
margin-bottom:10px;
font-weight:bold;
position: relative;
display: block;
line-height: 22px;
text-shadow: 0 0 1px #DDD;
text-decoration:none;
-webkit-box-shadow: inset 0 0 0 1px #FAFAFA;
-moz-box-shadow: inset 0 0 0 1px #FAFAFA;
box-shadow: inset 0 0 0 1px #FAFAFA;
background: -moz-linear-gradient(top, rgba(30,87,153,0.2) 0%, rgba(125,185,232,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,0.2)), color-stop(100%,rgba(125,185,232,0)));
background: -webkit-linear-gradient(top, rgba(30,87,153,0.2) 0%,rgba(125,185,232,0) 100%);
background: -o-linear-gradient(top, rgba(30,87,153,0.2) 0%,rgba(125,185,232,0) 100%);
background: -ms-linear-gradient(top, rgba(30,87,153,0.2) 0%,rgba(125,185,232,0) 100%);
background: linear-gradient(to bottom, rgba(30,87,153,0.2) 0%,rgba(125,185,232,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#331e5799', endColorstr='#007db9e8',GradientType=0 );
}
.top-block span{
clear:both;
}
.top-block:hover{
text-decoration:none;
}
...全文
相关推荐
IE6、IE7、IE8、Firefox、Chrome、Safari的CSS hack兼容一览表
小知识:什么是CSS Hack?由于不同的浏览器(如IE6、IE7、IE8、Firefox等)对CSS的解析有所不同,导致生成的页面效果不一致。
如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器
"本文主要探讨如何实现div+css在不同浏览器,包括IE6、IE7、IE8、IE9以及Firefox、Chrome等之间的兼容性。文章列举了一系列常见问题及解决方案,涉及DOCTYPE的影响、居中
IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表
本文档提供了一个关于IE6、IE7、IE8、Firefox、Chrome和Safari浏览器之间CSS(Cascading Style Sheets)兼容性的概述。由于不同浏览器对于CSS解析的细微差
如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器.docx
今天,我们将讨论如何让 Div+CSS 兼容 IE6 IE7 IE8 IE9 和 FireFox Chrome 等浏览器。
如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器.pdf
针对标题提及的"如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器",这里将详细讨论一些关键的CSS兼容性问题及解决方案。1.


