IE6 | IE7 li底部多出几像素bug

先看2个截图

IE6、IE7

chrome:

图示代码地址:http://jsfiddle.net/baofen14787/tH4YL/1/

会发现在IE6–7下,LI底部会多出几个像素,网上很多人说这是li的3pxbug,实际不然。底部的空隙和字体大小和高度有关。并不一定是3px。

出现这个bug的条件如下
必要条件:
li的子元素设置了浮动(例如:本例中的span设置了左浮动)

充要条件:
(IE6/7)li设置了width、height、zoom 之一 (例如:本文中的li设置了width)

解决方案也很简单:

1、别让li获得layout
2、设置li {vertical-align:middle} (推荐这种方法,简单方便)
3、设置li {font-size:0} li span{font-size:12px}。
4、设置li{float:left;width:100%}

还有其他方法就不一一说了。

其他解决方案也有

(仅IE7)li设置了padding-top、padding-bottom、margin-top、margin-bottom 之一

不要滥用div,保持代码的整洁

这篇文章算是很基础的了。旨在介绍如何保证页面代码的整洁、以维护性。使用有语义的页面标签,减少标签的滥用。

1. 移除不必要的<div>标签

嵌套在<form><ul>外面的标签没有必要

例子:

2. 使用有语义的标记

<h1><ul><p>等标签,替代<div>,即便样式表丢失,仍然保证页面的可读性。

3. 尽量少的使用<div>标签

4. 代码缩进格式

5. 在</div>结尾处加上这个<div>块的注释

扩展阅读:http://webdesignerwall.com/tutorials/coding-clean-and-semantic-templates

工作总结

平时的一些积累,遇到的一些问题,通过不断的总结,才能逐步提高。

1、在小行高下文字无法真正垂直居中。

之前在做TX面试题的时候,也遇到了这个问题,当时在IE8下,设置

height:15px; line-height:15px;background:#F00

IE8下,明显没有居中,字体偏上了。之后通过设置字体为“宋体”解决了。
搜索了下发现这篇相关的文章,分享之:小字体小行高兼容性分析及差异解决办法

在IE下去除 hr 标签的border样式

在IE下,我们可以这样实现

/* ------- EMBEDDED ------- */
<!--[if IE]>
<style type="text/css">
#primary-content  hr {
display : list-item;
list-style : url(/assets/images/wide-rule.gif) inside;
filter : alpha(opacity=0);;
margin-left: -10px;
width : 0;
}
</style>
<![endif]-->

在非IE下则很方便,可以直接用border:0搞定。

/* ----- STYLESHEET ----- */

hr{
background:url(short-rule.gif) repeat-x top left;
border: 0;
}

css实现input、checkbox垂直居中

先说input,这里说的input垂直居中,是指input内部文字的居中。

input 框在各种浏览器效果一样的解决法案:

为input框定义这样的css

.inputText{
font-size:12px;
height:14px;
padding:5px;
line-height:15px;
}

则input的高度最后为26px;

下面解释

height为字体大小加2px,line-height为height加1px。input框最后的高度则为height加padding-top加padding-bottom加2

想要什么样的高度就在字体的基础上改变height跟padding的值就可以。效果经测试在ie7 firefox chrome上一样,ie6上效果不太好但能接受。

这个应该也算不用css hack之外的一个比较不错的办法。

至于checkbox 和文字居中,可以用这段代码试试:

/*input vertical middle*/
.input_middle{font-family:tahoma;}
.input_middle label{vertical-align:middle; cursor:pointer}
.input_middle input{vertical-align:middle; margin-right:3px;}
<div class="input_middle">
<input name="test" value="1" type="checkbox">
<label>测试文字x</label>
</div>

扩展阅读:基于vertical-align的表单元素垂直对齐方式研究

CSS强制换行和CSS强制不换行

强制不换行
p.www_ghugo_com {
white-space:nowrap;
}
自动换行
p.www_ghugo_com {
word-wrap: break-word;
word-break: normal;
}
强制英文单词断行
p.www_ghugo_com {
word-break:break-all;
}

CSS设置不换行:

overflow:hidden 溢出隐藏
white-space:nowrap 不换行
pre 换行和其他空白字符都将受到保护
nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇br对象

CSS设置强制换行:

word-break:break-all 强制断开实现转行
normal ; 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本与之间的高度解决办法
设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。对于中文,应该使用break-all 。

css实现图片水平垂直居中

css:

<style>
.box {
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;

/*设置水平居中*/
text-align:center;

/* 针对IE的Hack */
*display: block;
*font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/

width:200px;
height:200px;
border: 1px solid #eee;
}
.box img {
/*设置图片垂直居中*/
vertical-align:middle;
}
</style>

html:

<div class=”box”><a href=”http://www.ghugo.com” target=”_blank”><img src=”logo.gif” /></a></div>

firefox下按钮点击出现虚线框的去除方法

简单的。加上 onfocus=’this.blur()’ 就OK了。

eg:<button id=”js_shop_cart_port_list” onfocus=’this.blur()’><span>Select Portfolio</span></button>

其他方法,纯CSS的:

<style type="text/css">
.wrap{position:relative;}
.btns{zoom:1;}
.btns *{outline:0;zoom:1;background:#f2f2f2;}
.btns button::-moz-focus-inner{border-color:transparent!important;}
</style>
<div>
<div>
<button type="button">确定</button><button type="button">取消</button>
<a href="#">确定</a><a href="#">取消</a>
</div>
</div>