学习DIV+CSS难点之经验总结

1、网页居中显示：

需要设置两个地方，一个是body，一个是外边框div。

CSS：

body{
margin:0;
padding:0;
text-align:center;
}
#main{ /*最外层DIV*/
width:760px;
margin:0 auto;
padding:0
}

2、文字垂直居中显示：

在DIV中定义一个行高与其高度相同即可。

CSS：

.title{
height:25px;
line-height:25px;
vertical-align:middle;
}

3、图片垂直居中显示：

在<img>标签中加入align="absmiddle" 即可。

4、清除浮动：

如果在同一行上有几个DIV并列显示，那么必须在其中加入清除浮动代码，如果在一行上只是一个DIV，好象不必清除浮动。

CSS：

.clear{clear: both;}

HTML示例：

<div id="main">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
<!--清除浮动后，后面的代码排列就不会有任何变形了，不管是在IE还是FF中，都很正确-->
<div ……

5、三列结构中的的DIV写法：

适用于左右栏是窄幅，中栏为主要内容显示，让其宽度自适应。

CSS:

#main{
width:760px;
margin:0 auto;
}
.left{
width:100px;
float:left;
}
.right{
width:120px;
float:right;
}
.center{
margin:0 120px 0 100px;/*页面中栏内容，未设置浮动，通过设置左右边界达到此DIV放于中栏的效果*/
width:auto;
}
.clear{clear: both;}

HTML：

<!--注意：center这个DIV的位置-->
<div id="main">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
<div class="clear"></div>
</div>

6、textarea在FireFox中不能自动换行的处理：

有时我们可能会遇到这种现象，在IE中可以自动换行，但在FF中就是不行，即使加了word-break:break-all;word-warp:warp;也没有效果，怎么回事呢？

主要原因是因为我们加入到textarea中的英文字符或代码过长，造成它误识别为一个单词所致。

解决方法也很简单，就是在内容中，人为加一些空格，让FF自动识别为多个单词，从而就能正确换行了。

 

7、设置<ul>表列缩进值：

默认情况下，<ul>列表是缩进两个字符显示列表项目的，我们可以通过设置负边界值达到控制其缩进值的目的。

CSS：

ul{
margin-left: -24px;
}

默认值是0，负值表示向左移，正值表示向右移。

8、水平导航条的制作示例：

HTML代码如下：

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Case Studies</a></li>
</ul>

CSS中，首先清除ul的list-style、margin和padding：

ul {
margin: 0;
padding: 0;
list-style: none;
width: 720px;
float: left; /*使ul不会因没有内容而没有了高度，使背景不能显示，也可以在最后加上空的div，然后用clear实现*/
background: #FAA819 url(images/mainNavBg.gif) repeat-x;
}

然后，可以将li的display属性设置了inline或者设置float为left，display li可能会出现bug，所以我一般用float left的方法：

ul li {
float: left;
}

ul a {
display: block;
float: left;　/*跨浏览设置*/
padding: 0 2em;
line-height: 2.1em;
background: url(images/divider.gif) repeat-y left top;/*设置分隔线*/
text-decoration: none;
color: #fff;
}

ul .first a {
background: none; /*去掉第一个链接的背景*/
}

ul a:hover {
color: #333;
}

9、让JS广告Banner垂直居中：

效果见本站feitec.com头部效果。

此种现象出现在一个比JS广告高度高的容器中。采用padding及内、外补丁法都无法完美解决它在IE、FF中的效果显示。

笔者采用相对定位加绝对设置法成功解决了这个问题。

（1）、确定JS广告高度值，本站中是60PX；

（2）、确定容器高度，本站是80PX（LOGO高度）；

（3）、确定偏移量为（80-60）÷2=10PX；

（4）、处理：

采用相对定位代码：position: relative;top:10px;来实现JS广告的垂直居中，完整代码如下：

<!--外框容器，确定了背景图片及总体定位-->
<div class="maintable" style="background:url('{PicUrl}/headerbg.gif');">
<!--左边LOGO-->
<div style="text-align:left;width:400px;float:left;"><img src="{PicUrl}/weblogo.gif" width="400" height="80" alt="飞腾设计网，创意无限，真诚永远！"></div>
<!--右边JS广告Banner，注意要确定此容器高度-->
<div style="text-align:center;position: relative;top:10px;height:80px;">
……JS广告代码……
</div>
</div>

在IE/FF中顺利通过。

10、QQ式伸缩菜单全兼容： （雨城注：2011-3-31 19:49:16 以后的内容中FF是指V4.0版本）

传统的QQ式伸缩隐藏菜单JS代码是（在本站前台用于评论表格的显/隐）：

function showsubmenu(sid){
whichel = eval("submenu" + sid);
if (whichel.style.display == "none"){
eval("submenu" + sid + ".style.display='';");
}
else{
eval("submenu" + sid + ".style.display='none';");
}
}

此代码在FF中是没有效果的，可更换为以下代码，则在IE/FF中都可以正常运行了：

function showsubmenu(sid) {
var list = document.getElementById("submenu"+sid);

if (list.style.display=="none") {
document.getElementById("submenu"+sid).style.display="";
}else {
document.getElementById("submenu"+sid).style.display="none";
}
}

 

11、多行文本框中插入表情符号：

效果说明：见本站前台评论/留言处的表情符号插入。

以下代码（节选）为原代码，只能在IE下运行，在FF中不能正常插入：

Str=Str&"document.write('<img src="""&UrlAdd&"images/emot/em0' + j + '.gif"" onclick=document.all."&FieldName&".value+=""[em0'+j+']"" alt=""点击插入心情图标[em0'+j+']"" /> ');"&VbCrlf

修改后的代码可以兼容FF，代码如下：

Str=Str&"document.write('<img src="""&UrlAdd&"images/emot/em0' + j + '.gif"" onclick=document.getElementById("""&FieldName&""").value+=""[em0'+j+']"" alt=""点击插入心情图标[em0'+j+']"" />

12、COMBOX效果的兼容：

原代码为：

<input type="text" name="message_incept" value="<%=s_FriendName%>" size="15" maxlength="20" id="message_incept">&nbsp;<select name="list2" id="list2" onchange="javascript:message_incept.innerText=this.options[this.selectedIndex].value;"><%=s_UserFriendList%></select>

修改后：

<input type="text" name="message_incept" value="<%=s_FriendName%>" size="15" maxlength="20" id="message_incept">&nbsp;<select name="list2" id="list2" onchange="javascript:var message_incept=document.getElementById('message_incept');message_incept.value=this.value;"><%=s_UserFriendList%></select>

13、解决button按钮的onclick事件在FF中无效的问题：

以下代码在IE中可以顺利执行，但在FF中却无效：

<button class="submit" onClick="window.location='?id=<%=i_Id%>&action=Edit'">编辑</button>

修改成以下代码即可正常执行：

<input type="button" class="submit" onClick="window.location='?id=<%=i_Id%>&action=Edit'" value="编辑">

14、关于页内链接（锚）的问题：

以下代码在IE中正常运行，在FF中不能使用：

<a href="#bottom">bottom</a>

……

<a name="bottom">脚部</a>

改用下面的代码搞定：

<a href="#bottom">bottom</a>

……

<a id="bottom">脚部</a>

15、播放背景音乐:

以下代码在IE中可以播放，FF不支持：

<bgsound src="images/syserror.wav" loop="1">

采用以下代码，IE可以正常播放，在FF中将会提示下载Quicktime就可以播放了：

<embed src="images/syserror.wav" autostart="true" width="0" height="0"></embed>

16、关于IE对DIV最小高度的BUG：

比如设置一条线：

<div style="height:1px;margin:0;padding:0;background:#00f;"></div>

它在FF中表现很正常，但在IE6中却有10多像素高，随便咋整，它都是那么高，怎么办呢？采用以下代码处理：

<div style="height:1px;overflow:hidden;margin:0;padding:0;background:#fff;"></div>

或者：

<div style="height:1px;font-size:1px; margin:0;padding:0;background:#fff;"></div>

17、控制文字在DIV中垂直距离的显示：

有时我们需要让文字在DIV中顶部显示，怎么办呢？比如本程序中的“顶、踩”功能中的数字，此时采用外边距或内边距都不能达到要求，经雨城摸索，找到以下方法，看以下代码：

.digg_ding,.digg_cai{cursor:pointer;height:60px;width:60px;line-height:35px;font-weight:bold;}
.digg_ding{
float:left;
background-image:url('ding.gif');
color:#CF3E0E;
}
.digg_cai{
float:right;
background-image:url('cai.gif');
color:#336699;
}

主要方法就是修改代码中的蓝色部分即line-height的值——

line-height=height：垂直居中方式；

line-height>height：下部显示；

line-height<height：上部显示。