我们从很多地方学习Div+CSS网页布局的知识，可是W3C validation有时难以操作，但用它你可以查看由版面设计引起的差错。验证程序抛出大量差错和警告，说明你的XHTML尚未完善，可能无法在不同浏览器上保持一致功能。下面十个细微的失效问题难住了大批程序员，本文就告诉你如何解决。在本文开始前介绍一些使用W3C验证程序时需要注意的问题。

IE浏览器中自定义滚动条样式：

1
2
3
4
5
6
7
8
9
10

HTML{
scrollbar-base-color: #C0C0C0;
scrollbar-base-color: #C0C0C0;
scrollbar-3dlight-color: #C0C0C0;
scrollbar-highlight-color: #C0C0C0;
scrollbar-track-color: #EBEBEB;
scrollbar-arrow-color: black;
scrollbar-shadow-color: #C0C0C0;
scrollbar-dark-shadow-color: #C0C0C0;
}

第一种解决方法：
我们可以利用IE6不识别!important来实现：

1
2
3

height:auto!important;
height:500px;
min-height:500px;

浏览器兼容性bug：

在ff下,a链接没有虚边框,而在ie浏览器里当我们的鼠标点击链接的时候却发现a链接有虚边框，后来我试了下a:visited{border:1px solid red}都不行,当我点击链接的时候,a链接还是有虚线边框,

后来发现这样可以：

1
2
3
4
5

a{
border:1px solid red;
*blr:expression(this.onFocus=this.blur());
outline:none;
}

众所周知的一个垂直居中实现方式(其他的暂不讨论)..

高度给定的元素, 其内部单行文本垂直居中的一种实现方式为: 给当前定高元素, 设置line-height属性, 其属性值等于当前元素的height值.

今天了解到了一条相关知识, 明白这个方法的实现原理.
我们常说的单倍行距, 双倍行距等等, 主观上认为是line-height设置的值, 如果量一下实际的效果, 会发现, 两行文本的间距, 并非等于line-height的值.

细节1

一、当文字与图片在一行，需要将文字与图片底对齐，需要这样写：

<li>记住密码<img src="" align="bottom" style="margin-bottom:-4px"/></li>

1、语义化HTML标签：

1）HTML告诉我们的是一块内容是什么（或其意义），而不是它长的什么样子。

2）写语义化的HTML结构其实很简单，首先要掌握HTML中各个标签的语义，在看到内容的时候想想用什么标签能更好的描述它，是什么就用什么标签。

2、常用标签分类：
1）、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>,作为标题来使用，并且依据重要性依次递减。<h1>是最高的等级，常用的是h1至h3。

刚刚开始学习css的时候，我采用了float为主来实现布局的方式，但是运用浮动很长一段时间之后，我发现这是一种被人牵着鼻子走的做法。至少，页面上不应过多的运用浮动，尤其是不要拿来确定整个布局。

很简单的道理，当你用了float:left,后面的div很可能需要跟着用float:left，而且当宽度不够的时候，本来该和上一个div一个水平线上的div跑到下面去了，如果某个div有margin属性，还会遇到ie6那个烦人的bug。而且浮动之后，你还必须在合适的地方使用清除浮动。

如何让iframe自适应高度_iframe去掉滚动条

1

<iframe id="frame1" src="###.html" width="640" scrolling="no" frameborder="0"></iframe>

两个div并排，左边为绝对宽度，右边为相对宽度，这个问题，我也经常遇到，我一般的处理方法是将最大的容器padding-left固定宽度，左边的固定宽度的一块position:absolute，然后right的一块width为百分百

今天学习到人家有三种解决方法，转载过来

两个div并排，很容易实现。如何让左边的div为固定宽度，右边的div为相对宽度呢？需要用到这种布局的情况比较多见，如左边为导航，右边为内容的页面。暂时想到了两种实现办法。

最近在写一个css的时候遇到一个问题：英文字母和汉字的行高不一样，导致在全汉字、全英文字母以及汉字字母混合时设置好的margin或padding 属性出现偏差…当然这种情况之存在于IE浏览器，Safari、Google Chrome、Firefox、Opera均不存在类似的问题
产生的原因：

当一个定义了宽度的块状元素中填充的全部为纯英文或者纯数字的时候，在IE和FF中都会撑大容器，不会自动换行

并且当数字或者英文中带有汉字时，会从汉字处换行，而纯汉字却可以自动换行。这个问题如何解决？先来认识一下两位主角word-wrap和word-break

word-wrap

CSS图片优化就是尽量压缩图片的大小，加快页面加载速度，这对于大型网站是很有用的。不要小看它，它可以大大提高网页加载速度。通常大家用到的方法就是css sprites。

CSS Sprites(图片整合技术)的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面加载速度。想必很多人已经在用这个技术，我给大家简单介绍一下，总结一下我使用css sprite时的一些技巧。

http://pan.baidu.com/s/1gdf1kDd最新可到jquery插件官网下载

我实现时找的所有资料http://pan.baidu.com/s/1mg0pKaG【多了点jquery.cookie的API】

相信熟悉javascript的朋友对鼠标坐标函数比较了解的，网上的资料也很多，就不多说了。先看看一段代码：

1
2
3
4
5
6

jQuery(document).ready(function(){
$('#demos').mousemove(function(e){
var relX = e.pageX - this.offsetLeft
var relY = e.pageY - this.offsetTop
$('#demos').html(relX + '， ' + relY);
});

append和appendTo的区别

append()前面是要选择的对象，后面是要在对象内插入的元素内容

appendTo()前面是要插入的元素内容且为Jquery对象，而后面是要选择的对象

实例：

Jquery中的$(document).ready()(也可简写为$().ready())方法与javascirpt本身提供的window.onload() 都可以在DOM载入就绪时操作并调用执行它所绑定的函数。
在实际使用中它们还是存在细微的区别的，window.onload()方法是在网页上所有的元素（包括元素的所有关联文件）完全加载到浏览器后才执行，即javascript此时才可以访问网页上的所有元素。

网上找了很多，感觉不好用或者有问题，自己写一个以备后用：类似discuz右下角消息提示框
主要是用css position的fixed属性，但是ie6不支持此属性，通过jquery.fixed.js插件实现兼容
效果如下：

获取页面某一元素的绝对X,Y坐标，可以用offset()方法：（body属性设置margin :0;padding:0;）

var X = $(‘#DivID’).offset().top;

var Y = $(‘#DivID’).offset().left;

1、使用方法

在需要使用JQuery的页面中引入JQuery的js文件即可。

例如：

引入之后便可在页面的任意地方使用jQuery提供的语法。

2、学习教程及参考资料