首页 / 倡萌说说 / 记录Hcms主题遇到的CSS问题及解决办法

记录Hcms主题遇到的CSS问题及解决办法

在这次制作Hcms主题过程中,遇到了不少问题,最突出的就是代码冲突,也最让倡萌头痛,毕竟倡萌连css和php都没有入门,勉强能看懂代码的基本作用和进行简单的html改写。还是有必要记录一下一些问题的解决方法的,估计以后还是有用的。

问题一:下拉菜单被幻灯挡住了

这个主要是CSS的层问题,幻灯和导航下拉都是使用了JS和CSS控制的,冲突是很常见的,我们需要解决的就是让导航下拉置于幻灯的上面即可。

解决方法:使用z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面(上面)。所以,倡萌这次就直接给幻灯对应的主ID添加了一个{  z-index:0;},这样幻灯就挡不住导航下拉啦。

方法出处:http://www.yingsheji.com/jiaocheng/dedecms0601110.html

问题二:IE6和IE7 float:right 换行

在首页的分类调用中,倡萌在文章列表中添加了一个时间显示,在css中使用float:right来让时间显示在标题的右边对齐,但是在IE6和IE7下,时间显示的位置却是该标题的下一行的右边,也就是换行了(忘了截图记录了)。

最好解决办法(2012-2-8更新):

其实可以使用span的同行浮动效果。只要将span标志包裹时间等信息,然后放在标题信息的前面,再加上一个右浮动即可

例如html如下:

1
2
3
4
5
6
<ul>
<li><span>2012-12-24</span>title1</li>
<li><span>2012-12-25</span>title2</li>
<li><span>2012-12-26</span>title3</li>
<li><span>2012-12-27</span>title4</li>
</ul>

只要在css对span添加属性:float:right;即可

解决方法(旧):使用position定位。在父标签<li>里面设置position:relative,在<span>里面设置position:absolute;right:0px;这样效果还不错。例如下面代码:

html代码:

1
2
3
4
5
6
<ul>
<li>title1 <span>2012-12-24</span></li>
<li>title2 <span>2012-12-24</span></li>
<li>title3 <span>2012-12-24</span></li>
<li>titler <span>2012-12-24</span></li>
</ul>

css代码:

1
2
li {position:relative;width:200px;border:1pxsolid#000;}
li span{position:absolute;right:0px;}

简易效果演示:

2012-01-04_00862

方法出自:http://love730.com/ie6ie7floatright.html

暂时就这两个问题,等遇到其他的,继续补充……

Return top