使用css遇到的问题

 

 

      这两天老总要我做网站首页，以前从未做过，遇到很多问题，简要总结一下：

1.背景图片的height最好与div的height属性相同，至少不应该超过包含它的div的高度，否则可能导致div的高度自动调整为背景图片的高度。

 

2.如果同一个标签，同时使用了id和，id的优先级高于class，如果希望class优先起作用，需指明class外层的id

比如：

#menu li {

padding-left:20px;

}

#menu li.menuDiv {

padding-left:18px;

}

 

<ul id="menu">

<li class="menuDiv">test</li>

</ul>

 

如果把定义样式的"#menu li.menuDiv"改为".menuDiv"，那么起作用的外层的"menu li"(即padding-left:20px)，因为id优先级高。

如果menuDiv不定义成class，而是定义成id，那么可以直接写"#menuDiv"，这时内层的id优先起作用。

 

3.用Dreamweaver的“设计视图”不太方便调试布局（所见即所得还不是很完善），但比较能反映IE的展现效果。用firebug比较直观，对padding、margin等属性展示得很好，但不能反映在IE下的效果。建议局部调试和微调时使用firebug。

 

4.有时候发现无论无论怎样修改css，在浏览器中的效果都没有改变，这时应该检查html是“格式良好的”，即开始标签一定对应有结束标签，没有标签的嵌套等。可以使用eclipse的xml插件格式化html文档，然后把每个div收缩，以便检查。或者用XMLSpy自动检查是否格式良好。

 

5.这个问题比较隐蔽，我在为菜单设置背景图片时，由于把menu.jpg另存为了menu.gif，导致在IE浏览器中不能显示，而在firefox和chrome里都可以正常显示，让我困扰了好久，开始一直在改css，都不管用。所以以后修改图片格式时不要简单的修改扩展名，最好在PS等专业图像处理软件中转换。

 

6.内容标题列表一般通过<ul>、<li>标签展示，有时想在标题之间插入分隔符，有多种办法：

    a.可以用对<li>的"border-bottom:dotted repeat-x 1px";

    b.在每个标题之间再插入"<li style="background:separator.gif repeat-x"></li>"。但是这种方案在IE中好像不行，主要是<li>的height属性在IE不支持设置的值太小（比如期望设置height:4px; 但在IE中看到效果可能是height:20px，远大于4px）。

    好在这种方案对于在菜单项之间插入分隔符是管用的，因为width属性可以任意设置（比如width:1px）。

 

7.有时候会把链接标签<a>当做一个按钮使用（配上相应的css样式，并习惯性地设置href="#"）。如果设置href="#"，会导致点击链接后页面会转到顶部，而不会继续停留在原来点击链接时的位置。如果去掉href="#"，又会导致鼠标指向链接时，鼠标不会成“手型”。要想同时达到以上两个目的，只有去掉href属性，并在css设置cursor:pointer属性.

另外，好像不支持对<a>设置宽度width，即使设置了，也会忽略。

8.有些js的onmouseover方法可以用css的a:hover替代，比如：鼠标指向某个菜单项时，该菜单项的背景图片改变。