写在前面
由于公司的产品需要兼容 IE8 浏览器，在做登陆时，发现一个问题，placeholder 在input = text 情况下，显示还算正常，但在 input = password 就变成了两个点，百度，gg很多，有的是通过lable 模拟，另外还有通过定位模拟，发现都不能很好地解决password 为点的问题。经过不断的尝试和参考别的产品在 IE 8 下兼容处理。我整理下，具体见下：
兼容处理
通过处理input focus时和 blur 时来控制文本的显示和隐藏。其中关键的时 input {background: none;} 和 z-index。
z-index 在父子元素中生效，需要在父级元素设置 position: relative
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery-1.9.1.js"></script> <style type="text/css"> body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; background: #fff; z-index: 1; } input {background: none;} .box { height: 300px; width: 300px; background: #f2f2f2; margin: 0 auto; padding-top: 20px; } .child { position: relative; margin: 20px; z-index: 2; border: 1px solid #ccc; height: 35px; background: #fff; } .ds-input { border: none medium; font-family: verdana; ime-mode: disabled; width: 243px; height: 21px; line-height: 21px; color: #bebebe; font-size: 14px; position: absolute; top: 0px; left: 5px; padding: 7px 0; outline: none; } .tips { position: absolute; z-index: -999; top: 2px; _top: 4px; left: 5px; color: #C3C3C3; font-size: 14px; line-height: 33px; visibility: visible; cursor: text; padding-left: 4px; } </style> <script type="text/javascript"> $(function(){ $("input").focus(function(){ var id = "#tip_"+this.id; $(id).hide(); }); $("input").blur(function(){ var id = "#tip_"+this.id; if(this.value=="") { $(id).show(); } }); }); </script></head><body> <div class="box"> <div class="child"> <input type="text" class="ds-input" id="username" autocomplete="off"> <span class="tips" id="tip_username">手机号/邮箱</span> </div> <div class="child"> <input type="password" class="ds-input" id="password" autocomplete="off"> <span class="tips" id="tip_password">密码</span> </div> </div></body></html>希望能够对大家有帮助。