又一个在ie和firefox下不统一的css, border-style就差一点点.

posted by David Chen at March 6, 2008, 6:03 AM    

border-style 这个css样式,在ie和firefox下显示效果差一点点就完全相同了.
先看看 border-style的说明:
    none (没有边框，无论边框宽度设为多大)
    dotted (点线式边框)
    dashed (破折线式边框)
    solid (直线式边框)
    double (双线式边框)
    groove (槽线式边框)
    ridge(脊线式边框)
    inset (内嵌效果的边框)
    outset (突起效果的边框)

再看看以下的 html代码

      <div style='width: 600px; text-align: center;'>
            <fieldset>
            </fieldset>
            <fieldset style='border: 1px #D6A07C solid; padding: 0 0 0 0;'>
                  <div style='float: left; width: 20%;'></div>
                  <div style='float: left; width: 20%;'></div>
                  <div style='float: left; width: 20%;'></div>
                  <div style='float: left; width: 20%;'></div>
                  <div style='float: left; width: 20%;'></div>
            </fieldset>
      </div> 
html代码中.第二个fieldset中嵌了5个div,每个占 20%的宽度, 在firefox下,一切正常, 
和我想要的效果完全一样, 但是在 ie下呢, 最后一个 div 换行了. 
再看看第二个fieldset的style设置, border: 1px #D6A07C solid; padding: 0 0 0 0;
当我将 solid 去掉的时候, 能正常显示, 和firefox的一样, 但一用上 solid, outset, 
inset ..等border-style的值后, 就不能正常显示了.
不过听说ie8是支持 w3c的了, 不知是否还会存在类似这种与w3c冲突的情况.