【问题标题】:Padding inside textbox not displaying correctly in internet explorer文本框内的填充无法在 Internet Explorer 中正确显示
【发布时间】:2012-02-19 12:26:07
【问题描述】:

我有一个页面---链接现在被删除---

您可以在 FF 和 IE 中查看它(我有 IE 9)。在其中您可以看到右上角的搜索框有一个填充(左:32px 和右:72px)。填充在 FF 和 Chrome 中正常工作,但在 IE 中不正常。

可能的原因是什么。

搜索框代码-

<form action="">
    <input type="text" name="search" id="search" />
    <input type="submit" id="button" value="" />
    </form>

CSS:

#search {
    background:url(images/searchlens.jpg) no-repeat 0 0;
    float:right;
    width: 286px;
    height:40px;
    border:none;
    padding-left: 32px;
    padding-right:72px; 
}

【问题讨论】:

    标签: html css internet-explorer textbox padding


    【解决方案1】:

    我认为您的意思是当框中有足够的文本时,不会应用右填充,并且随着输入更多文本,即使是左填充也会消失。这可以在以下简单文档中观察到:

    <!doctype html>
    <title>input padding</title>
    <style>
    #search {
        padding-left: 32px;
        padding-right: 72px;
        width: 286px;
    }
    </style>
    <input id=search value=
    "Hello cruel world of Internet Explorer, why don't I get padded as specified?">
    

    如果在框中输入更多字符,则即使是左侧的填充也会消失。

    似乎没有什么好的办法可以解决这个奇怪的问题。在对问题 padding a text input in IE… possible? 的回答中,提出了一些修复建议,它们可能在某些情况下有所帮助,但对我的测试没有帮助。

    所以我建议通过将input 元素包装在div 元素中并在div 元素上设置背景和填充来规避这个问题,这样它里面的input 框大部分是无样式的并且所有滚动发生在里面。

    【讨论】:

    • 我尝试了您答案中的链接,但在尝试了答案中的所有技巧后,我无法让该代码工作,但人们报告说它对他们有用......
    猜你喜欢
    • 2015-01-30
    • 1970-01-01
    • 1970-01-01
    • 2012-09-16
    • 2011-03-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-11-29
    相关资源
    最近更新 更多