css中遇见的问题以及自我解决方式（一）

1.ie8与firefox的兼容

我是在firefox下写的样式，用ie8和360打开后布局乱了。
解决：在网上收到一个解决方式，很好用：

<meta http-equiv="X-UA-Compatible" content="IE=7" />

2.用div来实现一个表格样式会有间隙

类似于：

jsp代码：

<div id="number_right">
    <div id="th">
        <ul>
            <li>排名</li>
            <li>类别</li>
            <li class="f5">书名</li>
            <li>评价</li>
        </ul>
    </div>
    <div id="book">
        <div>1</div>
        <div>[奇幻]</div>
        <div class="f5">重生升级系统</div>
        <div>98</div>
    </div>
</div>

解决办法：
只设置里面数据单元格的大小，不要设置包围的div的大小。如下：

#th,#book{
    margin:auto 29px;
}

#book{
    border:1px solid #ccc;
}

#th li,#book div{
    float:left;
    width:68px;
    height:25px;
    border:1px solid #ccc;
    border-left:none;
    border-right:none;
    text-align:center;
    background-color:#E8F2FE;
}

#th li{
    font-weight:bold;
    color:#B6007F;
}
#book div{
    border:none;
    border-bottom:1px solid #ccc;
}

#th li{
    list-style:none;
}

#th .f5,#book .f5{
    width:136px;
}

#th{
    margin-top:40px;
}

3.用css,div的背景设置图片形式显示图片，显示不出来

解决：背景图片的路径不对。

background-image:url(../image/cat.jpg);

用这种方式写的图片路径要相对于css而言，而

<img src="image/cat.jpg"/>

这种方式的图片路径是相对于jsp文件而言的。

4.关于文字内容居中对齐

对于居中而言，有的地方使用：

text-align:center;

就可以显示出来，不能显示的，只能使用padding，或者line-height来调试了。

5.用table的时候ie8浏览器与360浏览器显示边框黑线

解决：不要在jsp页面的table标签里设置html的tabel属性，使用css即可。
注意：如果使用了css，只要有

<table border='1'></table>

就会显示黑线。

今天就写到这里吧，以后如果有学到新的知识，再更新，新手一枚，欢迎大家指正，谢谢！