主页

一段在IE8，Chrome下正常的CSS，在IE6下不正常，高分求高手

windspeed 2012-11-07 10:15:54

各位，给高分，帮我修改下这个样式，能适合到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;
}

...全文

7 条回复

caiin 2012年12月20日

你这个应该是ie的bug造成的，然后你是用了float跟 margin,所以加上display:none;就可以了

回复点赞

lanselixiang 2012年12月06日

我看了这个设计图的展示。做网站页面展示，css不是重点，结构是难点，只要结构合理，基本不需要写浏览器的私有css就可以实现。而且兼容性极佳。切记，如果用到浏览器私有css，先检查自己的结构是否合理，结构标签重在语义。

回复点赞

windspeed 2012年12月05日

再顶下帖子。这个还是木有解决

回复点赞

windspeed 2012年11月08日

照着两个的修改了，还是有问题 IE6右上角的数字还是无法正常显示

回复点赞

GoCityPass新加坡曼谷通票 2012年11月07日

IE6不支持.row-fluid [class*="span"]:first-child这种样式，你要单独写一个，然后给元素加上

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style>
/*链接样式*/
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 .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"] {
  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 .ie6firstchild{margin-left: 0px}
/*----------------------------*/
.row-fluid [class*="span"]:first-child {
  margin-left: 0px
}
.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;
}

.icon32-red {background-image : url('images/opa-icons-red32.png') ;background-position : 0px -160px ;
             background-repeat : no-repeat ;display : inline-block ;height : 32px ;vertical-align : text-top ;width : 32px ;}
.icon32-red:hover{background-image : url('images/opa-icons-darkgray32.png') ;}


.icon32-icon-star-on {background-image : url('images/opa-icons-color32.png') ;background-position : -448px -96px ;
               background-repeat : no-repeat ;display : inline-block ;height : 32px ;vertical-align : text-top ;width : 32px ;}

.icon32-icon-star-on:hover {background-image : url('images/opa-icons-darkgray32.png') ;}

         
.icon32-compose {background-image : url('images/opa-icons-color32.png') ;background-position : 0 -128px ;
                    background-repeat : no-repeat ;display : inline-block ;height : 32px ;vertical-align : text-top ;width : 32px ;}
   
   
.icon32-envelope-closed{background-image : url('images/opa-icons-color32.png') ;background-position : 0px -192px ;     
   background-repeat : no-repeat ;display : inline-block ;height : 32px ;vertical-align : text-top ;width : 32px ;}
   
 a:hover span{
  background-image : url('images/opa-icons-darkgray32.png') ;
} 
</style>
<body>
       <div id="BlockWithNumber" class="row-fluid">
                <a id="stationNum1" title="6 new members." class="well span3 top-block ie6firstchild span" 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 span" 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 span" 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 span" 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>

回复点赞

windspeed 2012年11月07日

============================================================================================= 接着主贴， ============================================================================================= .icon32-red {background-image : url('images/opa-icons-red32.png') ;background-position : 0px -160px ; background-repeat : no-repeat ;display : inline-block ;height : 32px ;vertical-align : text-top ;width : 32px ;} .icon32-red:hover{background-image : url('images/opa-icons-darkgray32.png') ;} .icon32-icon-star-on {background-image : url('images/opa-icons-color32.png') ;background-position : -448px -96px ; background-repeat : no-repeat ;display : inline-block ;height : 32px ;vertical-align : text-top ;width : 32px ;} .icon32-icon-star-on:hover {background-image : url('images/opa-icons-darkgray32.png') ;} .icon32-compose {background-image : url('images/opa-icons-color32.png') ;background-position : 0 -128px ; background-repeat : no-repeat ;display : inline-block ;height : 32px ;vertical-align : text-top ;width : 32px ;} .icon32-envelope-closed{background-image : url('images/opa-icons-color32.png') ;background-position : 0px -192px ; background-repeat : no-repeat ;display : inline-block ;height : 32px ;vertical-align : text-top ;width : 32px ;} a:hover span{ background-image : url('images/opa-icons-darkgray32.png') ; }

回复点赞

Wicho开源开发中 2012年11月07日

在IE 8 以下版本浏览器部分走形把class "well"改成这样看看


.well {
  min-height: 20px;
  padding: 19px;
  margin:0 0 20 0;
  float:left;
  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);
}

回复点赞

发动态

发帖子

CSS

创建于2007-09-28

加入

3.1w+

社区成员

6.0w+

社区内容

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

社区公告

暂无公告