html 调整笔记

素颜马尾好姑娘i 2022-06-18 08:28 729阅读 0赞

断断续续的在开发过程中收集了好多的[bug][]以及其解决的办法，都在这个文章里面记录下来了！希望以后解决类似问题的时候能够快速解决

，也希望大家能在留言里面跟进自己发现的ie6 7 8[bug][]和解决办法！

**1：li边距“无故”增加**

任何事情都是有原因的，li边距也不例外。

先描述一下具体状况：有些时候li边距会突然增 加很多，值也不固定（只在IE6/IE7有这种现象），让人摸不着头脑，仔细“研究”发现是由于其低级元素ul的padding引 起，padding的上下值对li有影响，左右无影 响。所以只好笨手笨脚地把padding去掉，换成margin。这是能解决问题，但往往不是我们想要的结果，或许 还会引起其他不必要的怪现象。

现在终于发现解决这个问题的方法，其实很简单，既然是有ul引 起的，就设置ul的显示形式为\*display:inline-block;即可，前面加\*是只 针对IE6/IE7有效，其他浏览器并不渲染这个属性。

**2：分页数字 字体用“Arial ”加粗不抖动**

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type"content="text/html; charset=gb2312"/>  
<title>无标题文档</title>  
<link href="css/style.css"rel="stylesheet"type="text/css"/>  
<style type="text/css">  
body, ul, h1 \{  
font-family:Arial;  
font-size:12px;  
\}  
.page \{  
text-align:center;  
\}  
.page a \{  
display:inline-block;  
padding:5px 8px;  
text-decoration:none;  
border:1px solid \#09F;  
background-color:\#0CF;  
color:\#FFF;  
\}  
.page a:hover, .page .selected \{  
border:1px solid \#CCC;  
background-color:\#FFF;  
color:\#000;  
font-weight:bold;  
\}  
</style>  
</head>  
<body>  
<h1>分页样式</h1>  
<div class="page"> <a href="\#">1</a> <a href="\#"class="selected">2</a> <a href="\#">3</a> <a href="\#">4</a> <a href="\#">5</a>  
<a href="\#">6</a> <a href="\#">7</a> <a href="\#">8</a> <a href="\#">9</a> <a href="\#">10</a> </div>

</body>  
</html>

**3：IE6 CSS选择器区分IE6**  
IE6不支持子选择器；先针对IE6使用常规申明CSS选择器，然后再用子选择器针对IE7+及其他浏览器。  
/\*IE6 专用 \*/  
.content \{color:red;\}  
/\* 其他浏览器 \*/  
div>p .content \{color:blue;\}

**4：[IE6最小高度][IE6]**  
IE6 不支持min-height属性，但它却认为height就是最小高度。解决方法：  
使用ie6不支持但其余浏览器支持的属性!important。  
\#container\{min-height:200px; height:auto !important; height:200px;\}

**5：IE6100% 高度**  
在IE6下，如果要给元素定义100%高度，必须要明确定义它的父级元素的高度，如果你需要给元素定义满屏的高度，就得  
先给html和body定义height:100%;。

**6：[IE6躲猫猫][IE6 1][bug][]**  
在IE6和IE7下，躲猫猫bug是一个非常恼人的问题。一个撑破了容器的浮动元素，如果在他之后有不浮动的内容，并且有一  
些定义了:hover的链接，当鼠标移到那些链接上时，在IE6下就会触发躲猫猫。  
解决方法很简单：  
1.在（那个未浮动的）内容之后添加一个<span style="clear: both;"> </span>  
2.触发包含了这些链接的容器的hasLayout，一个简单的方法就是给其定义height:1%;

**7:[IE6绝对定位][IE6 2]元素的1像素间距bug**  
IE6下的这个错误是由于进位处理误差造成（IE7已修复），当绝对定位元素的父元素高或宽为奇数时，bottom和right会  
产生错误。唯一的解决办法就是给父元素定义明确的高宽值，但对于液态布局没有完美的解决方法。

**8: IE下[z-index][]的bug**  
在IE浏览器中，定位元素的[z-index][]层级是相对于各自的父级容器，所以会导致z-index出现错误的表现。解决方法是给  
其父级元素定义z-index，有些情况下还需要定义position:relative。

**9: Overflow Bug**  
在IE6/7中，overflow无法正确的隐藏有相对定位position:relative;的子元素。解决方法就是给外包容器.wrap加上  
position:relative;。

**10: 横向列表宽度bug**  
如果你使用float:left;把<li>横向摆列，并且<li>内包含的<a>（或其他）触发了 hasLayout，在IE6下就会有错误的  
表现。解决方法很简单，只需要给<a>定义同样的float:left;即可。

**11: 列表阶梯bug**  
列表阶梯bug通常会在给<li>的子元素<a>使用float:left;时触发，我们本意是要做一个横向的列表(通常 是导航栏)，  
但IE却可能呈现出垂直的或者阶梯状。解决办法就是给<li>定义float:left;而非子元素<a>，或者 给<li>定义  
display:inline;也可以解决。

**12: 垂直列表间隙bug**  
当我们使用<li> 包含一个块级子元素时，IE6(IE7也有可能)会错误地给每条列表元素（<li>）之间添加空隙。  
解决方法：把<a>flaot并且清除float来解决这个问题；另外一个办法就是触发<a>的hasLayout（如定 义高宽、  
使用zoom:1;）；也可以给<li> 定义display:inline;来解决此问题；另外还有一个极有趣的方法，给包含的文  
本末尾添加一个空格。

**13: IE6调整窗口大小的 Bug**  
当把body居中放置，改变IE浏览器大小的时候，任何在body里面的相对定位元素都会固定不动了。解决办法：  
给body定义position:relative;就行了。

**14: 文本重复Bug**  
在IE6中，一些隐藏的元素（如注释、display:none;的元素）被包含在一个浮动元素里，就有可能引发文本重复bug。  
解决办法：给浮动元素添加display:inline;。

**15：链接a的title属性中的文字换行**

啥也不说，先上个图

我们都知道，可以给链接a加上title属性，这样鼠标移动上去会显示title属性定义的 文字，常常用来加一些提示语句，

比如说点击查看详情之类的，代码形如：

<a href=”\#” title=”点击查看详情”>链接xx</a>

。之前一直没有仔细注意过这个东西。如果鼠标浮动上去要显示更多东西的话，怎么实现呢。第一 反应是jquery的tooltip插件。今天无意中发现某个学院的网站鼠标移动上去可以显示这么完整的信息，效果看起来似乎还可以，就想看看怎么做的， 找了下，没发现有Javascript脚本，再往链接的地方一看，终于让我发现了门道了：

<a href='\#' target="\_blank" title="标题: 关于对我校2006年至2009年发展党员工作情况进…  
发布日期: 2010-5-31 16:05:08 类别：院务通知 点击: 139">  
\[05-31\]  关于对我校2006年至2009年发展党员工作情况进…  
</a>

注意到了吗。。很简单，只要使用 这样的转义符号,即可实现换行。在一些tooltip要求定制性不高的情况下，这样的显示效果相 当不错，而且是浏览器原生的效果，安逸。

哎，虽然号称精通[div+css][div_css]，但是发现一些小小但是很实用的技巧自己还不知道，看来html还有很多东西可以挖掘。  
**16：如何去掉点击链接时的虚线**

解决方案1：在<a href="http://blog.sina.com/wangfengteacher"onFocus="this.blur()> Mike blog</a>  
解决方案2：在标签中加入 hidefocus<a href="http://blog.sina.com/wangfengteacher"hidefocus> Mike blog</a>  
解决方案3: 如果连接太多，可以用外部链接 .HTC 文件。如，blur.htc  
文件内容如下：  
<public:attach event="onfocus"  
onevent="makeblur()"></public:attach>

<SCRIPT language=javascript>  
function makeblur()\{  
this.blur();  
\}  
</SCRIPT>  
在 CSS 中加入如下代码：  
A \{ behavior:url(blur.htc); \}  
解决方案4 ( 推荐 )：使用CSS样式，可加入代码：a \{blr:expression\_r(this.onFocus=this.blur())\}

如果是FF等浏览器的话可这样写 a\{ouline:none;\}

**17:制作1px细线表格**

解决方案1 ( 推荐)：我们只要给这个table一个border-collapse:collapse的样式，就可以达到这个效果了。  
具体如下：  
1、HTML结构:  
<table width="300" border="1" cellpadding="0"cellspacing="0" bordercolor="\#C0C0C0"  
style="border-collapse:collapse;">  
<tr>  
<td> </td>

**18：IE6 下[z-index无效][z-index 1]**

在CSS中，通过z-index这个属性改变层级，要让z-index起作用有个前提，就是元素的position属性要 是relative，absolute或是fixed。

z-index层级越高，内容越应该在上面显示。在大部分的浏览器在大部分的情况下，确实如此，但是不绝对，尤其遇到IE6。

1、关于效果截图的些必要说明

下面的不是废话，是为了更容易的理解我下面唾沫横飞的内容。

以下所有结果截图的大背景如下：  
1、页面上固定不动的，一成不变的，送豪宅也不会从良的是一个黑色背景，透明度 40%，几乎满屏显示的层级为1的绝对定位层。HTML为：

对应CSS为：\#blank\{width:100%; height:600px; background:black; opacity:0.4; filter:alpha(opacity=40); position:absolute; left:0; top:0; [z-index:1][z-index_1];\}

作用是为了让层级关系一目了然。看：

这说明内容在z-index为1的绝对定位层之下。  
这说明内容在z-index为1的绝对定位层之上。

2、页面上做对比的是美女图片，图片在半透明黑色绝对定位层的上面还是下面很容易辨别，这样，您就能够对我所说的z- index不起作用有很直观的认识了。

2、IE6的抱怨：浮动让我沉沦  
现在开始真正的讲述 问题的产生，原因以及解决了。首先讲讲第一种z-index无论设置多高都不起作用情况。这种情况发生的条件有三个：1、父标签 position属性为relative；2、问题标签无position属性（不包括static）；3、问题标签含有浮动(float)属性。  
您 可以拿下面的代码自己做个简单测试：

丫的，这z-index都9999了，层级够高吧，但是，看下面的图：

这一对比就知道问题了，可能有人会疑问，这会不会是IE6的relative自己感冒了，而不是浮动(float)携带 了“甲流病毒”。好，我现在去掉浮动，HTML代码如下：

结果IE6下：

我想，问题应该都清楚了，至于原因，我起初以为是haslayout搞的鬼，后来，用zoom一测试，发现不是（IE7 下无此bug也证明不是 haslayout的原因），似乎就是这个float会让z-index失效。由于将外部div的position:relative属性改为 absolute可以解决这一问题，我就怀疑是不是浮动让relative发生了些变化，float与relative在水平定位上可以说是近亲，会不会 是因为这两者搅和在一起所以什么“畸形”“体弱多病”就出现了。这仅是我的猜测而已，真正的原因还是去问IE6的后妈吧。

解决方法，解决方法有三，1、position:relative改 为position:absolute；2、去除浮动；3、浮动 元素添加position属性（如relative，absolute等）。

3、固执的IE6：它只认第一个爸爸  
可能不少人知 道，这IE6下，层级的高低不仅要看自己，还要看自己的老爸这个后台是否够硬。用术语具体描述为：  
父标签position属性为relative 或absolute时，子标签的absolute属性是相对于父标签而言的。而在IE6下，层级的表现有时候不是看子标签的z-index多高，而要看它 们的父标签的z-index谁高谁低。

有一定[经验][Link 1]的人可能都知道上面的事实。但是，相信这里面很多人不知道IE6下，决定层级高低的不是当前的父标签，而是整 个DOM tree（节点树）的第一个relative属性的父标签。有时平时我们多处理一个父标签，z-index层级多而复杂的情况不多见，所以难免会有认识上 的小小偏差。

好，下面展示这个bug。

条件很简单，只要绝对定位的第一个元素的第一个爸爸，或者说是最老的那个爸爸级别的人的relative属性小于黑色半 透明层的z-index层级。例如下面的HTML代码：

可以看到，mm3图片的父标签div 是绝对定位，层级9999，比1大多了，绝对定位的父标签层级1000(10000也一样)，也比黑色半透明层的[z-index:1][z-index_1]大多了，但是，我们可 怜的IE6童鞋——

再看看以Firefox为代表的其他童鞋：

IE7与IE6有着同样的bug，原因很简单，虽然图片所在div当前的老爸层级很高(1000)，但是由于老爸的老爸 不顶用，可怜了9999如此强势的孩子没有出头之日啊！

知道原因解决就很轻松了，给第一任老爸添加z-index后的HTML代 码如下：

结果IE6童鞋喜笑颜开，春光灿烂：

**19：css reset中的[list-style][]:none**

在IE6,7下,当UL不具有float:left;display:inline;时:  
无论有没有[list-style][]:none这个属性,列 表符都被隐藏,不占位置(下面代码中的5,6)  
当UL具有float:left;display:inline;属性时  
list- style:none,列表符被隐藏,但是仍然留有位置(list-style-position:inside);  
未 设置list-style:none;列表符被隐藏,也不占位(list-style-position:outside)

在firefox中只要list-style-type为none ,则 无论list-stype-position的值为outside或inside , list-style都能很好的被隐藏  
而在IE6,7中,仅 设置list-style:none,并不足以解决所有问题  
所以我认为在css reset的时候使用 list-style:none outside none 更好

**20：[链接去边线][Link 2]（完全兼容）**

a,a:hover\{outline:none; blur:expression(this.onFocus=this.blur());\}

21: display:inline-block 额外产生的6PX 或者4px margin

今天在做一个Timeline的模块的时候遇到一个棘手的问题： 给元素添加display:inline-block 属性的时候会产生额外的4px的margin-right。

原始代码

.YP\_timelineChart\_box li\{  
display:-moz-inline-stack;  
display:inline-block;  
zoom:1;  
\*display:inline;  
text-indent:-3000px;  
width:5px;  
vertical-align:bottom;  
background-color:\#00FF00;  
position:relative;  
\}

页面渲染结果：

每一列都会向右产生外边距4px，苦思不得其解，尝试负的外边距，但是涉及到其他的问题:每个li标签会重叠1-2个px，妨碍到鼠标hover状 态的事件。尝试修改doctype类型也不见效果。后来尝试了另外一个方法：

把原来的HTML 代码结构：

更改为：

这样就不会产生额外的外边距，也弄不清楚为什么会出现这种问题。先暂时记下，以后再研究研究。

[  
][Link 3]**22: IE6中伪类:hover的使用及BUG**

以前未曾遇到类似的问题，一番google，才知道这是IE6处理CSS伪类:hover的Bug。例如如下的代码：

在IE7/FF中，鼠标移动到链接上时，”淘你喜欢”字样会变为红色，但IE6则无反应。所以IE6的bug就是如果a 与 a:hover 的css定义是一样的，也就是说如果a:hover 中没有样式的改变，hover就不会被触发。但如果在a:hover\{\}增加一些特定的属性，例如

a:hover\{border:none;\}  
或者  
a:hover\{padding:0;\}  
又或者  
a:hover\{background: none;\}

此时hover就可以触发了。

**23：原来IE6支持!important**

.demo \{ color:\#F00!important; color:\#000; \}/\*IE6显示错误理解：.demo显示为黑色\*/  
/\*而下面IE6是正确理解的：.demo显示为红色\*/  
.demo \{ color:\#F00!important;\}  
.demo \{ color:\#000; \}

24:去掉button按钮左右两边的留白

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8" />  
<style>  
\*\{padding:0; margin:0\}  
input,button\{overflow:visible;padding:0;\}  
</style>  
</head>  
<body>  
<form id="form1" name="form1" method="post" action="">  
<input type="submit" name="button" id="button" value="button按钮左右留白的解决方法" />  
</form>  
<button><span>button按钮左右留白的解决方法</span></button>  
</body>  
</html>

**25:中文字体在css中的写法**

黑体SimHei\\9ED1\\4F53黑体

宋体SimSun\\5B8B\\4F53宋体  
新宋体 NSimSun\\65B0\\5B8B\\4F53新宋体

仿宋FangSong\\4EFF\\5B8B仿宋  
楷体KaiTi\\6977\\4F53 楷体

微软正黑体Microsoft JhengHei\\5FAE\\x8F6F\\6B63\\9ED1\\4F53微软正黑体  
微软雅黑Microsoft YaHei\\5FAE\\8F6F\\96C5\\9ED1微软雅黑

幼圆 YouYuan\\5E7C\\5706幼圆

**26： ie6里width:100%是相对于上有高度设置的元素 其他浏览器是相对于上个相对定位或绝对定位的元素**

<div style=" width:600px; height:600px; background:\#000;">

<div style=" width:500px; height:500px; background:\#333;">

<div style=" float:left; background:\#666; width:400px;" >

<div style=" width:300px; height:300px; background:\#999;">

<div style=" width:100%; height:100%; background:\#f00; position:absolute; left:0; top:0;">

在非ie6的浏览器中都是满屏幕的红， 说明非ie6的浏览器的width和height的百分比，都是相对的上个相对定位或者绝对定位的元素，没有就为html元素

，而ie6中的width和height 的百分比，相对的是上个有高宽显示设置的元素，而且height的百分比设置失效，所以上述代码在ie6中就出现宽度穿越了他的父元素而遇见width:500px;的元素的时候，边把自己设置成了width:500px;而height的设置则失效， 这个， 让人很蛋疼！ie6，真的该早点走了！

</div>

**27： [ie不缓存背景图片][ie]的解决办法**

高性能web开发中，一张小小的图片请求能省的就省，可IE6存在不缓存背景图的bug.如果重复使用了一个图片作为背景，那么每用一次就会重新去服务器拉一次。。。给服务器带来巨大的压力。解决方法有两种，

1：采用JS

var ua = navigator.userAgent.toLowerCase();

var isIE6 = ua.indexOf("msie 6") > -1;//判断是否为IE6

// remove css image flicker

//IE6下默认不缓存背景图片，CSS里每次更改图片的位置时都会重新发起请求，用这个方法告诉IE6缓存背景图片

if(isIE6)\{

try\{

document.execCommand("BackgroundImageCache", false, true);

\}catch(e)\{\}

2.在页面上直接使用1个DIV元素来加载该图片，这样加载图片就能真正被缓存，鼠标移动也不会发送请求了。

**28:[ie6下css实现max/min-width/height][ie6_css_max_min-width_height]**

\_width:expression(this.width>300?"300px":ture); max-width:300px;

\_height:expression(this.height>300?"300px":ture); max-height:300px;

**29：css空白外边距互相叠加的解决方法**

body\{width:300px; font-family:'微软雅黑'; font-size:1em; text-indent:10px; line-height:1.25;\}

div\{background:\#000;margin:10px;\}

div p\{background:\#f60;margin:15px\}

这是一个div元素内嵌套p的简单样例,先别复制保存为html测试,在你看完上面的代码后,你是否以为它出为你呈现如下图的效果?

好,现在你可以复制上面代码,保存到本地,然后在浏览器中打开.你会惊讶的发现,它呈现给你的效果是这样的:

为什么会这样呢?按CSS中,对于有块级子元素的元素计算高度的方式,如果元素没有垂直边框和填充,那其高度就是其子元素顶部和底部边框边缘之间的距离.故,子元素的顶部和底部空白边就突出到元素的外围了.p元素的15px外边距与div元素的10px的外边距形成一个单一的15px垂直空白边,另外,形式的这个空白边并非为div所包围,而是呈现在div的外围.所以,我们看到了第二张效果图.  
如何解决?本人比较推荐两种解决方式:  
其一,为外围元素定义透明边框.具体到本例,即在样式div中加入border:1px solid \#ddd;  
其二,为外围元素定义内边距填充..具体到本例,即在样式div中加入padding:1px  
另外,还可以通过外围元素绝对定位,或者定义子元素浮动等方式实现.

**30：纯css解决多行文字垂直居中**

.alert\{

width:400px;

height:250px;

display:table-cell;

vertical-align:middle;

line-height:1.5em;

border:1px solid red;

.alert\_blank\{

height:100%;

width:0;

display:inline;

vertical-align:middle;

zoom:1;

.alert\_con\{

width:100%;

zoom:1;

display:inline;

vertical-align:middle;

</style>

<div class="alert">

<div class="alert\_con">哥乃多行文字垂直居中～哥乃多行文字垂直居中～哥乃多行文字垂直居中～哥乃多行文字垂直居中～</div>

</div>

其大概原理为：第一个alert\_blank容器，display:inline以后作为行内元素，它的高度为100%，宽度却为0，相当于紧贴外层容器左边框的一条透明的线，这样就使得外层容器里面只存在一行。外层容易的vertical-align:middle使得其内部相当于一行文字垂直居中。真正盛放内容的div也是display:inline，它对外和blank垂直居中，只要内部文字不超过blank的高度，这个效果将是完美的。虽然从语义化上讲，用空白div布局说不太过去，但是瑕不掩瑜。另：zoom:1是为了触发[hasLayout][]。

**31:**[**关于**][Link 4]**[flash遮盖div][flash_div]浮动层**

(a) place Flash embed script in <div> container (I use SWFObject.js)\[将flash嵌入脚本放到一个div容器中\]

(b) add wmode=transparent to Flash embed script\[增加wmode=transparent 到flash嵌入脚本\]

(d) set <body> tag with style .. position:relative;left:0px;top:0px;z-index:0;  
(otherwise Firefox does not accept negative z-index)

(e) set floating iframe in container with z-index: 99;\[将浮动的iframe在容器中的zindex设置为99\]

(f) use CSS to position flashcontent and htmlcontent containers.\[使用css来调整flash容器和html容器的位置\]

其他方案网上比较多见,不做阐述.在此说下使用第一个方案如何解决:

var so = new SWFObject("XXX.swf", "flashId", "宽度", "高度", "版本", "背景色");

//设置flash不遮盖div层

so.addParam("wmode", "opaque");

so.write("flashcontent");

如此设置即可让flash无法遮盖住div

**32:如何处理ie6的文字行高**  
ie6下汉字就会显示偏上位置，而在标准浏览器中不存在这个问题字体 Tahoma,试下  
不过如果有规定第一个字体是用啥的，那就只能忽略这个问题..我终于明白淘宝为啥把Tahoma字体放到第一位了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>测试ie6的文字行高表现</title>

body,ul,li,p \{margin:0;padding:0;\}

body \{ font:12px/1.5  Tahoma,"宋体",Arial, Helvetica, sans-serif; \}

ul \{float:left;list-style:none; margin-bottom:10px;\}

ul li, p \{ margin-top:4px;background:silver;clear:left;\}

ul li \{float:left;margin-top:4px;\}

</style>

</head>

<body>

<ul>

<li>岁月不饶人哪</li>

</ul>

<p>岁月不饶人哪</p>

</body>

</html>

**33:利用 CSS 跨浏览器地隐藏文字一法**

ont-size:0;        // for firefox & opera

color: transparent; // for webkit

overflow:hidden;    // for IE

font-size:0;

filter:alpha(opacity=0);

自测后兼容的浏览器如下：

IE 6-8

Firefox 1-4

Opera 9-10

Safari 3-5

Chrome 1-6

**34:button在chrome下默认有2px的margin**

<button>在chrome下有两像素margin</button>

35:ie6和ie7里面margin失效

<div style="padding:20px;background:\#f00;">

<div style="background:\#fff;height:200px;margin:50px;">我的margin在ie里面失效了</div>

解决办法去掉里面div的高度

作为[web][]前端[开发][Link 5]人员，在平常的页面制作时不可避免的会碰上这样那样的问题，这时就需要寻找这些X[HTML][]及[CSS][]常见问题的解决方案。我根据自己的经验和心得挑选和整理了一些[XHTML][HTML]常见问题和CSS常见问题的解决方案进行总结归档，希望对大家会有所帮助：

1、如何定义高度很小的容器？

在IE6下无法定义小高度的容器，是因为有一个默认的行高。  
列举2种解决方案：overflow:hidden | line-height:0

2、图片下方出现几像素的空白间隙？

这个也有多种解决方案，如将img定义为display:block,或定义父容器为font-size:0，个人更推荐使用vertical-align的方式，它的值可以是text-top | text-bottom | middle等

3、IE6双倍margin的BUG?

display:inline

4、文本垂直方向对齐文本输入框？

设置input为vertical-align:middle，textarea也是如此

5、为什么在[web][]标准下ie无法设置滚动条的颜色？

将设置滚动条颜色的样式定义到html标签选择符上即可

6、如何让层在falsh上显示？

不可以，除了少数几个级别很高的家伙除外。  
但可以将[flash][]设置为透明，这时层就会透过falsh显示，近似于覆盖在fl[as][]h之上了，如：  
<param name="mode" value="transparent" />

7、如何使得文字不换行？

定义包含文字的容器为：width:xxx;white-space:nowrap;

8、ie中如何让超出宽度的文字显示为省略号？

定义容器为：overflow:hidden;width:xxx;white-space:nowrap;text-overflow:ell[ip][]sis;

9、如何在点文字时也选中checkbox?

10、一个div为margin-bottom:10px，一个div为margin-top:5px，为什么2个div之间的间距是10px而不是15px?

这种情况浏览器会自动进行margin重叠，只显示较大的margin值  
解决方案：只设置其中一个div的margin为15px

11、如何解决ie下当li中出现2个或以上的[浮动][Link 6]时，li之间产生的空白间隙？

设置li的vertical-align，值可以为top | text-top | middle | bottom | text-bottom

12、如何使得英文单词不发生词内断行？

word-wrap:break-word;

13、为什么被访问过的链接颜色没有变化？

定义链接的样式时，需要按照:link,:vi[site][]d,:hover,:active这样的顺序，可以使用LoVe HAte（喜欢讨厌）来记忆

14、单行文本如何垂直居中？

height:xxx;line-height:xxx; 高和行高相同即可

15、已知高度的容器如何在页面中水平垂直居中？

今天终于是忙里偷闲，好不容易有点时间更新一下[Blog][]了，却被蜘蛛网似的杂乱无章的引用，留言，评论给搞得不爽，准备等再有时间就把“引用”什么的功能去掉，太多垃圾引用了。

发现好长一段时间或者说一直以来，很多同学都对居中这个话题十分感兴趣，当然这里既有水平居中也包括垂直居中。

相信水平居中大家都已经了解并会使用了，无非就text-align:center这样，还有为了兼容不可或却的margin:auto。

某样功能或效果的实现其实都是依据一定的原理基础上的，有的东西只要明白了它的原理，至于有多少种实现方法和各方法的写法优劣这都会因个人对原理的理解程度不一而有所不同。

扯远了，还是回来聊所谓的垂直居中（要垂直居中的这个东东的高度是即定的）。

16、未知尺寸的图片图如何水平垂直居中？

参阅：[http][]://www.missyuan.com/viewthread.[php][]?tid=470830

17、标准模式和怪异模式下的盒模型区别？

标准模式下：实际宽度 = width + padding + border  
怪异模式下：实际宽度 = width - padding - border

18、如何解决IE下的3像素BUG?

参阅：http://www.missyuan.com/viewthread.[php][]?tid=470832

19、如何做1像素细边框的table?

方法1：设置table的border-collapse:collapse;  
<style type="text/css">  
table\{border-collapse:collapse;border-color:\#000;\}  
td\{border-color:\#000;\}  
</style>  
<table cellspacing="0" cellpadding="0" border="1">  
<tr>  
<td>测试</td>  
<td>测试</td>  
</tr>  
</table>  
  
方法2：关键在于设置cellspacine="1"，用间隙来作为边框  
<style type="text/css">  
table\{background:\#000;\}  
tr\{background:\#fff;\}  
</style>  
<table cellspacing="1" cellpadding="0" border="0">  
<tr>  
<td>测试</td>  
<td>测试</td>  
</tr>  
</table>

20、以图换字的几种方法及优劣分析

以图换字，其实是为了保证页面的可读性，这样既有利于[搜索引擎][Link 7]，又有利于结构查看。由于这种方式被大多数人所认同，所以方法也越来越多：  
  
方法1：使用text-indent的负值，将内容移出容器；  
方法2：使用display:none，将内容隐藏；  
方法3：使用padding将文字挤出容器之外，并将超出的部分hidden;  
方法4：使用font设置超小字体，达到隐藏内容的目的。  
  
方法1（非常不推荐）看起来蛮简单，但其实有几个不理想的地方，1是比较吃资源；2是在ie5下面会出现滞后背景无法显示；3是内容为超链接时，长长的黑色虚框，让你抓狂。  
方法2（不推荐）其实倒也不复杂，只是需要多添加一个标签，比较浪费；且display:none出现的几率太多，对[seo][]也是会有些许影响的。  
方法3（推荐）Standard Model下要2层标签才能搞定，不过相对方法1和2还是有优势的，推荐一下。  
方法4（强烈推荐）只需要将字体和行高设置为0，然后overflow:hidden就行;不过这样在Safari和Chrome下还是会有1px高的字出现，所以应该再设置一下字体的颜色和背景图相同或相近。以此就同样可以达到隐藏内容的目的，暂时还没发现有什么副作用，强烈推荐。

21、如何容器透明，内容不透明？

假设在标准模式下有如下结构：  
<div class="outer">  
  <p class="inner">我不要透明</p>  
</div>  
  
IE only的方法：在父容器outer被设置为透明后，只需要将子容器inner设置为position:relative; 如果需要兼容其它浏览器，则以上的方法不适用，且结构也需改为：  
  
<div class="outer"></div>  
<div class="inner">我不要透明</div>  
  
然后使用position + z-index搞定位置

22、如何去掉链接的虚线框？

IE下：<a href="\#" οnfοcus="this.blur();"...>  
FF下:a\{outline:none;\}

23、如何使得页面字体行距始终保持n倍字体大小为基调？

在body内设置line-height:n即可，注，不可以为它加上单位  
原因可参阅：http://blog.doyoe.com/article.[asp][]?id=195

24、如何使用标准的方法插入flash?

25、Standard Model如何让容器可以height:100%？

设置html,body\{height:100%;margin:0;\}

26、如何使得表格的宽度固定?

设置table为table-layout:fixed;这时表格将使用固定[布局][Link 8]算法，多出的内容将不影响表格的宽度

27、如何让min-height兼容ie6?

.min-height\{min-height:100px;\_height:100px;\}  
<div class="min-height">我是兼容的min-height</div>

28、如何让鼠标变成手型且兼容所有现代浏览器？

cursor:pointer

29、如何实现ie6下的position:fixed?

参阅：http://blog.doyoe.com/article.asp?id=188

30、IE下如何对Standard Mode与Quirks Mode进行切换？

IE6以下的浏览器不用触发，直接以Quirks Mode呈现页面。  
  
 IE6和IE7都可以触发的（在XHTML 的DTD申明前加上HTML注释）：  
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  
IE6的触发（在XHTML 的DTD申明前加上[XML][]申明）：  
<?xml version="1.0" encoding="utf-8"?>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  
当没有使用DTD声明或者使用HTML4以下（不包括HTML4）的DTD声明时，基本所有的浏览器都是使用Quirks Mode呈现。

31、如何给一个元素定义多个不同的css规则？

32、如何区别display:none与visibility:hidden?

相同的是display:none与visibility:hidden都可以用来隐藏某个元素；  
不同的是display:none在隐藏元素的时候，将其占位空间也去掉；而visibility:hidden只是隐藏了内容而已，其占位空间仍然保留。

33、如何解决按钮在IE7及以下浏览器中随着value增多两边留白也随着增加的问题？

通常情况下，如果value的长度是固定不变的，可以给按钮设定一个固定的width，这是没有问题的，但在大多数情况下，按钮的value大多是可变的，所以给按钮设定width是不够理想的。  
解决方法，给按钮加上：\#overflow:visible;padding:0 10px;其中overflow用于清除ie两边的留白，padding用于使得各浏览器的留白一致。

[bug]: http://www.wufangbo.com/tag/bug
[IE6]: http://www.wufangbo.com/tag/ie6%e6%9c%80%e5%b0%8f%e9%ab%98%e5%ba%a6
[IE6 1]: http://www.wufangbo.com/tag/ie6%e8%ba%b2%e7%8c%ab%e7%8c%ab
[IE6 2]: http://www.wufangbo.com/tag/ie6%e7%bb%9d%e5%af%b9%e5%ae%9a%e4%bd%8d
[z-index]: http://www.wufangbo.com/tag/z-index
[div_css]: http://www.wufangbo.com/tag/divcss
[z-index 1]: http://www.wufangbo.com/tag/z-index%e6%97%a0%e6%95%88
[z-index_1]: http://www.wufangbo.com/tag/z-index1
[Link 1]: http://www.wufangbo.com/tag/%e7%bb%8f%e9%aa%8c
[list-style]: http://www.wufangbo.com/tag/list-style
[Link 2]: http://www.wufangbo.com/tag/%e9%93%be%e6%8e%a5%e5%8e%bb%e8%be%b9%e7%ba%bf
[Link 3]: http://www.yooyo.me/blog/displayinline-block-%E9%A2%9D%E5%A4%96%E4%BA%A7%E7%94%9F%E7%9A%844px-margin/
[http_www.taobao.com]: http://www.taobao.com/
[ie]: http://www.wufangbo.com/tag/ie%e4%b8%8d%e7%bc%93%e5%ad%98%e8%83%8c%e6%99%af%e5%9b%be%e7%89%87
[ie6_css_max_min-width_height]: http://www.wufangbo.com/tag/ie6%e4%b8%8bcss%e5%ae%9e%e7%8e%b0maxmin-widthheight
[hasLayout]: http://baike.baidu.com/view/2945869.htm
[Link 4]: http://www.cnblogs.com/jonathanpeng/archive/2010/07/15/1777902.html
[flash_div]: http://www.wufangbo.com/tag/flash%e9%81%ae%e7%9b%96div
[web]: http://www.jzxue.com/shujixiazai/jianzhanxiangguan/
[Link 5]: http://www.jzxue.com/wangzhankaifa/
[HTML]: http://www.jzxue.com/wangyesheji/html/
[CSS]: http://www.jzxue.com/wangyesheji/css/
[flash]: http://www.jzxue.com/tuxiangsheji/flash/
[as]: http://www.jzxue.com/tag/FlashAS/
[ip]: http://www.jzxue.com/tag/IP/
[Link 6]: http://www.jzxue.com/tag/%E6%B5%AE%E5%8A%A8/
[site]: http://www.jzxue.com/jianzhanzhinan/
[Blog]: http://www.jzxue.com/tag/BLOG/
[http]: http://www.jzxue.com/tag/HTTP/
[php]: http://www.jzxue.com/wangzhankaifa/php/
[Link 7]: http://www.jzxue.com/tag/%CB%D1%CB%F7%D2%FD%C7%E6/
[seo]: http://www.jzxue.com/jianzhanzhinan/seo/
[asp]: http://www.jzxue.com/wangzhankaifa/asp/
[application]: http://www.jzxue.com/tag/Application/
[Link 8]: http://www.jzxue.com/wangyesheji/wangyebuju/
[XML]: http://www.jzxue.com/wangzhankaifa/xml-xslt/