IE 8没有这个问题。 Chrome 2和Firefox 3.5做,我认为其他浏览器也。从我在线阅读IE 7有同样的问题,但那篇文章没有解决方案。
这里有一个例子:
<html> <head> <style> .pictureInput { background-image: url(http://storage.conduit.com/images/searchengines/search_icon.gif); background-position: 0 1px; background-repeat: no-repeat; } </style> <body> <input type="text" class="pictureInput" /> <br /> <br /> <input type="text"> </body> </html>
在Chrome 2中,它看起来像这样:http://www.screencast.com/users/jadeonly/folders/Snagit/media/d4ee9819-c92a-4bc2-b84e-e3a4ed6843b6
在Firefox 3.5:http://www.screencast.com/users/jadeonly/folders/Snagit/media/d70dd690-9273-45fb-9893-14b38202ddcc
更新:JS解决方案:我仍然希望找到一个纯粹的CSS输入解决方案,但这里是我现在将使用的解决方法。请注意,这是粘贴在我的应用程序,所以不是一个很好,独立的例子像上面。我刚刚包括我的大型网络应用程序的相关部分。你应该能够得到的想法。 HTML是具有“链接”类的输入。大的垂直背景位置是因为它是一个sprite。测试在IE6,IE7,IE8,FF2,FF3.5,Opera 9.6,Opera 10,Chrome 2,Safari 4.我需要调整背景位置一些几个像素的浏览器仍然:
JS:
$$('input.link').each(function(el) { new Element('span',{'class':'linkIcon'}).setText(' ').injectBefore(el); if (window.gecko) el.setStyle('padding','2px 2px 2px 19px'); });
CSS:
input.link { padding-left: 19px; } span.linkIcon { z-index: 2; width: 19px; height: 19px; position: absolute; background-image: url(img/fields.gif); background-position: 1px -179px; background-repeat: no-repeat; }
更新:CSS关闭足够的解决方案:根据kRON的建议这里的CSS使输入匹配FF和IE在Vista中,这是一个很好的选择,如果你决定放弃纯默认值并强制执行一种风格。我已经修改他的轻微,并添加了“蓝色”的效果:
CSS:
input[type=text],select,textarea { border-top: 1px #acaeb4 solid; border-left: 1px #dde1e7 solid; border-right: 1px #dde1e7 solid; border-bottom: 1px #e3e9ef solid; -moz-border-radius: 2px; -webkit-border-radius: 2px; padding: 2px; } input[type=text]:hover,select:hover,textarea:hover,input[type=text]:focus,select:focus,textarea:focus { border-top: 1px #5794bf solid; border-left: 1px #c5daed solid; border-right: 1px #b7d5ea solid; border-bottom: 1px #c7e2f1 solid; } select { border: 1px; }
解决方法
原文地址:https://www.jb51.cc/css/221205.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。