当前位置：首页 → 问答吧 → 文本框内嵌背景的疑问

文本框内嵌背景的疑问

时间：2010-06-03

来源：互联网

复制内容到剪贴板

代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>AutoComplete</title>
        <style type="text/css">
            .layer{
                width:100px;
                height:200px;
                position:absolute;
                background:#6595d6;
                z-index:999;
                margin:0;padding:0;border:1px solid black;background-color:#fff;position:absolute;top:20px;left:0px; clear:both;
                filter:alpha(opacity=70); opacity:0.7;
            }
            .autoComplete{
                /*
                background-image:url(http://bbs.blueidea.com/attachment.php?aid=145274&k=41c067d9a25e9c692ce538b5dc63db77&t=1275533758&noupdate=yes);
                background-position:right center;
                 background-repeat:no-repeat;*/
                cursor:pointer;
                border:1px solid #ccc;
                padding:1px 20px 1px 1px;
                background:url(sel.gif) no-repeat right top;
                overflow:hidden;
                width:100px;
                height:18px;
            }
            .autoComplete:hover{
                background-position:right -20px;
            }
            .div_autoComplete{
                border:1px solid #6595d6;
                height:24px;
            }
            .span_selectArrow{
                width:17px;
                height:20px;

                background:url(sel.gif) no-repeat right top;
                float:left;
            }
        </style>
    </head>
    <body>
        
        
        <div class="layer"></div>
        dfdff
        <select>
            <option>
                去人可如今
            </option>
            <option>
                testing
            </option>
            <option>about</option>
        </select>

        <div class="div_autoComplete"><span></span></div>
        <input type="text" id="txtAuto" class="autoComplete" >
        <input  type="text" class="autoComplete">
        <br />
        <input  type="text" style="float:left"><span class="span_selectArrow"></span>
        df;gfgjfkgf
    </body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>AutoComplete</title> <style type="text/css"> .layer{ width:100px; height:200px; position:absolute; background:#6595d6; z-index:999; margin:0;padding:0;border:1px solid black;background-color:#fff;position:absolute;top:20px;left:0px; clear:both; filter:alpha(opacity=70); opacity:0.7; } .autoComplete{ background-image:url(http://bbs.blueidea.com/attachment.php?aid=145274&k=41c067d9a25e9c692ce538b5dc63db77&t=1275533758&noupdate=yes); background-position:right center; background-repeat:no-repeat; cursor:pointer; border:1px solid #ccc; padding:1px 20px 1px 1px; overflow:hidden; width:100px; height:18px; } .autoComplete:hover{ background-position:right -20px; } .div_autoComplete{ border:1px solid #6595d6; height:24px; } .span_selectArrow{ width:17px; height:20px; background:url(sel.gif) no-repeat right top; float:left; } </style> </head> <body>   <div class="layer"></div> dfdff <select> <option> 去人可如今 </option> <option> testing </option> <option>about</option> </select> <div class="div_autoComplete"><span></span></div> <input type="text" id="txtAuto" class="autoComplete" > <input type="text" class="autoComplete"> <br /> <input type="text" style="float:left"><span class="span_selectArrow"></span> df;gfgjfkgf </body> </html>
提示：您可以先修改部分代码再运行

如上面的代码所示：当文字打多的时候在IE中背景会消失后再显示出来，而在FF中是正常的，指教各位是什么原因，谢谢！

[ 本帖最后由 samlin 于 2010-6-3 11:01 编辑 ]