解析:

 方法一：
首先判断浏览器是否支持 placeholder 属性，如果不支持的话，就遍历所有 input 输入框，
获取 placeholder 属性的值填充进输入框作为提示信息，同时字体设置成灰色。
当输入框获得焦点( focus )同时输入框内文字等于设置的提示信息时，就把输入框内清
空；
当输入框失去焦点( blur )同时输入框内文字为空时，再把获取的 placeholder 属性的值填
充
进输入框作为提示信息，同时字体设置成灰色；
当输入框内有输入( keydown )时，此时输入框内的提示信息已经由 focus 事件清除，此
时只需要把字体再恢复成黑色即可
此方法的缺点是，不适用于加载完 DOM 时即获得焦点的输入框，因为在用户的角度，
加载完页面时看到的获得焦点的那个输入框，它的提示文字是看不到的。
HTML：
<input type="text" id="uname" name="uname" placeholder="请输入用户名"/>
CSS：
.phcolor{ color:#999;}
JS
$(function(){
//判断浏览器是否支持 placeholder 属性
supportPlaceholder='placeholder'in document.createElement('input'),
placeholder=function(input){
var text = input.attr('placeholder'),
defaultValue = input.defaultValue;
if(!defaultValue){
input.val(text).addClass("phcolor");
}
input.focus(function(){
if(input.val() == text){
$(this).val("");
}
});
input.blur(function(){
if(input.val() == ""){
$(this).val(text).addClass("phcolor");
}
});
//输入的字符不为灰色
input.keydown(function(){
$(this).removeClass("phcolor");
});
};
//当浏览器不支持 placeholder 属性时，调用 placeholder 函数
if(!supportPlaceholder){
$('input').each(function(){
text = $(this).attr("placeholder");
if($(this).attr("type") == "text"){
placeholder($(this));
}
});
}
});
方法二：
此方法的思路是做一张含有提示文字的图片作为 input 输入框的背景图，初始时获得焦
点同时加载背景图；
当输入框不为空时，去掉背景图；
当输入框为空时，加载背景图；
当用户键盘按键且输入框不为空( 输入字符 )时，去掉背景图；
当用户键盘按键且输入框为空( 删除字符 )时，加载背景图。
此方法的缺点是：需要为每一个提示文字不同的 input 制作背景图片，并且设置 input
的样式。
CSS：
.phbg{ background:url(img/bg.jpg) 0 0 no-repeat;}
JS
$(function(){
//判断浏览器是否支持 placeholder 属性
supportPlaceholder='placeholder' in document.createElement('input');
if(!supportPlaceholder){
//初始状态添加背景图片
$("#uname").attr("class","phbg");
//初始状态获得焦点
$("#uname").focus;
function destyle(){
if($("#uname").val() != ""){
$("#uname").removeClass("phbg");
}else{
$("#uname").attr("class","phbg");
}
}
//当输入框为空时，添加背景图片；有值时去掉背景图片
destyle();
$("#uname").keyup(function(){
//当输入框有按键输入同时输入框不为空时，去掉背景图片；有按键输入同时为
空时（删除字符），添加背景图片
destyle();
});
$("#uname").keydown(function(){
//keydown 事件可以在按键按下的第一时间去掉背景图片
$("#uname").removeClass("phbg");
});
}
});
方法三：
使用插件：Placeholders.js 

解析:

 * png24 位的图片在 iE6 浏览器上出现背景，解决方案是做成 PNG8.也可以引用一段脚本
处理。
* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}
来统一。
* IE6 双边距 bug:块属性标签 float 后，又有横行的 margin 情况下，在 ie6 显示 margin
比设置的大。
* 浮动 ie 产生的双倍距离（IE6 双边距问题：在 IE6 下，如果对元素设置了浮动，同时
又设置了 margin-left或 margin-right，margin值会加倍。）#box{ float:left; width:10px; margin:0
0 0 100px;} 这种情况之下 IE 会产生 20px 的距离，解决方案是在 float 的标签样式控制中加
入 ——_display:inline;将其转化为行内属性。(_这个符号只有 ie6 会识别)
* 渐进识别的方式，从总体中逐渐排除局部。 首先，巧妙的使用“\9”这一标记，将
IE游览器从所有情况中分离出来。 接着，再次使用“+”将 IE8 和 IE7、IE6 分离开来，这样
IE8 已经独立识别。
css// .bb{ background-color:#f1ee18; .background-color:#00deff\9;
+background-color:#a200ff; _background-color:#1e0bd1; }
* IE 下,可以使用获取常规属性的方法来获取自定义属性, 也可以使用 getAttribute()获取
自定义属性 ; Firefox 下 ,只能使用 getAttribute()获取自定义属性 . 解决方法 :统一通过
getAttribute()获取自定义属性。
* IE 下 ,event 对象有 x,y 属性 ,但是没有 pageX,pageY 属性 ; Firefox 下 ,event 对象有
pageX,pageY 属性,但是没有 x,y 属性. * 解决方法：（条件注释）缺点是在 IE 浏览器下可能会
增加额外的 HTTP 请求数。
* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入
CSS 属性 -webkit-text-size-adjust: none; 解决。
* 超链接访问过后 hover 样式就不出现了 被点击访问过的超链接样式不在具有 hover
和 active 了解决方法是改变 CSS 属性的排列顺序 : L-V-H-A : a:link {} a:visited {} a:hover {}
a:active {}
* 怪异模式问题：漏写 DTD 声明，Firefox仍然会按照标准模式来解析网页，但在 IE 中
会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写 DTD 声明的好
习惯。现在可以使用[html5]( http://www.w3.org/TR/html5/single-page.html)推荐的写法：
`<doctype html>`
* 上下 margin重合问题
ie 和 ff都存在，相邻的两个 div 的 margin-left 和 margin-right 不会重合，但是 margin-top
和 margin-bottom 却会发生重合。
解决方法，养成良好的代码编写习惯，同时采用 margin-top 或者同时采用 margin-bottom。
* ie6 对 png 图片格式支持不好(引用一段脚本处理) 

解析:

 Query 2.x 系列和 jQuery 1.x 拥有同样的 API，但是不再支持 IE6、7、8。
推荐使用 1.x version，除非你确定 IE6、7、8 用户不再访问网站。
jquery1.11 属于 1.x 版本，其兼容 IE6、7、8，所以也支持 IE9. 

解析:

 行内元素：和有他元素都在一行上，高度、行高及外边距和内边距都不可改变，文字图
片的宽度不可改变，只能容纳文本或者其他行内元素
块级元素：总是在新行上开始，高度、行高及外边距和内边距都可控制，可以容纳内敛
元素和其他元素；
空元素：在 HTML 元素中，没有内容的 HTML 元素被称为空元素。空元素是在开始标
签中关闭的。<br> 就是没有关闭标签的空元素。 

解析:

 media 属性规定被链接文档将显示在什么设备上。media 属性用于为不同的媒介类型
规定不同的样式。Screen 计算机默认屏幕，all 适用于所有设备，max-width 超过最大宽度就
不执行，min-width 必须大于最小宽度才执行。