Html 如何在IE中防止背景图像在表单字段中滚动？

问题在于IE7和IE6（我必须在工作中支持IE6）

.myForm input{background:url（../images/input_bg.jpg）无重复；}
提交

在IE中，当您键入输入字段时，一旦到达末尾，图像将停止重复，文本将在输入字段的后面显示，而没有任何背景图像。在firefox和包括IE8在内的其他浏览器中，文本只是滚动，但图像保持不变。为什么它以IE7和IE6结尾

---

另外，我无法删除图像中的“无重复”，因为它有边框，你可以看出它以一种奇怪的方式重复。

我没有要测试的IE6或IE7，但你是否尝试过

背景附件：修复了
？
我没有要测试的IE6或IE7，但是你有没有尝试过背景附件：修复？
在IE6/7/8/Firefox/Chrome中测试过

在每个输入周围添加包装
div
，如下所示：

<div><input type="text" /></div>

.myForm input { background: transparent }
.myForm div { background: url(../images/input_bg.jpg) no-repeat; display:inline }
.myForm input, .myForm div { width: 150px }

这不是很好，但很管用。如果浏览器在IE6/7/8/Firefox/Chrome中进行了测试，则更有效的方法是添加包装器
div
，并使用JS修改样式

在每个输入周围添加包装
div
，如下所示：

<div><input type="text" /></div>

.myForm input { background: transparent }
.myForm div { background: url(../images/input_bg.jpg) no-repeat; display:inline }
.myForm input, .myForm div { width: 150px }

这不是很好，但很管用。更有说服力的方法是添加包装器
div
，如果浏览器是的，则使用JS修改样式。下面的jquery修复了IE6和IE7中的问题。如果您的输入字段动态更改，那么每次更改时都需要触发此代码

jQuery(document).ready(function(){
    if (jQuery.browser.msie && jQuery.browser.version < 8.0) {
        jQuery('form input[type="text"], textarea').each(function() {
            var inputField = jQuery(this);
            var backgroundImage = inputField.css('background-image');
            var display = inputField.css('display');
            if (backgroundImage != 'none' && display != 'none') {
                var wrapperDiv = inputField.wrap('<div class="ie-form-input-background-image-scroll-fix" />').parent();       
                wrapperDiv.css('background-image', inputField.css('background-image'));
                wrapperDiv.css('background-position-x', inputField.css('background-position-x'));
                wrapperDiv.css('background-position-y', inputField.css('background-position-y'));
                wrapperDiv.css('background-color', inputField.css('background-color'));
                wrapperDiv.css('background-repeat', inputField.css('background-repeat'));
                wrapperDiv.css('margin-left', inputField.css('margin-left'));
                wrapperDiv.css('margin-top', inputField.css('margin-top'));
                wrapperDiv.css('margin-right', inputField.css('margin-right'));
                wrapperDiv.css('margin-bottom', inputField.css('margin-bottom'));
                inputField.css('margin', 0);
                inputField.css('background-image', 'none');            
                inputField.css('background-color', 'transparent');            
                wrapperDiv.css('zoom', 1);
                wrapperDiv.css('display', 'inline');
            }
        });
    }
});

jQuery（文档）.ready（函数（）{
if（jQuery.browser.msie&&jQuery.browser.version<8.0）{
jQuery（'forminput[type=“text”]，textarea'）。每个（函数（）{
var inputField=jQuery（this）；
var backgroundImage=inputField.css（'background-image'）；
var display=inputField.css（'display'）；
if（背景图像！=“无”&&display！=“无”）{
var wrapperDiv=inputField.wrap（“”）.parent（）；
css（'background-image'，inputField.css（'background-image'）；
wrapperDiv.css（'background-position-x'，inputField.css（'background-position-x'）；
wrapperDiv.css（'background-position-y'，inputField.css（'background-position-y'）；
css（'background-color'，inputField.css（'background-color'）；
css（'background-repeat'，inputField.css（'background-repeat'）；
wrapperDiv.css（'margin-left'，inputField.css（'margin-left'）；
wrapperDiv.css（'margin-top'，inputField.css（'margin-top'）；
wrapperDiv.css（'margin-right'，inputField.css（'margin-right'）；
wrapperDiv.css（'margin-bottom'，inputField.css（'margin-bottom'）；
css（'margin'，0）；
css（'background-image'，'none'）；
css（'background-color'，'transparent'）；
wrapperDiv.css（'zoom'，1）；
css（'display'，'inline'）；
}
});
}
});
以下jquery修复了IE6和IE7中的问题。如果您的输入字段动态更改，那么每次更改时都需要触发此代码

jQuery(document).ready(function(){
    if (jQuery.browser.msie && jQuery.browser.version < 8.0) {
        jQuery('form input[type="text"], textarea').each(function() {
            var inputField = jQuery(this);
            var backgroundImage = inputField.css('background-image');
            var display = inputField.css('display');
            if (backgroundImage != 'none' && display != 'none') {
                var wrapperDiv = inputField.wrap('<div class="ie-form-input-background-image-scroll-fix" />').parent();       
                wrapperDiv.css('background-image', inputField.css('background-image'));
                wrapperDiv.css('background-position-x', inputField.css('background-position-x'));
                wrapperDiv.css('background-position-y', inputField.css('background-position-y'));
                wrapperDiv.css('background-color', inputField.css('background-color'));
                wrapperDiv.css('background-repeat', inputField.css('background-repeat'));
                wrapperDiv.css('margin-left', inputField.css('margin-left'));
                wrapperDiv.css('margin-top', inputField.css('margin-top'));
                wrapperDiv.css('margin-right', inputField.css('margin-right'));
                wrapperDiv.css('margin-bottom', inputField.css('margin-bottom'));
                inputField.css('margin', 0);
                inputField.css('background-image', 'none');            
                inputField.css('background-color', 'transparent');            
                wrapperDiv.css('zoom', 1);
                wrapperDiv.css('display', 'inline');
            }
        });
    }
});

jQuery（文档）.ready（函数（）{
if（jQuery.browser.msie&&jQuery.browser.version<8.0）{
jQuery（'forminput[type=“text”]，textarea'）。每个（函数（）{
var inputField=jQuery（this）；
var backgroundImage=inputField.css（'background-image'）；
var display=inputField.css（'display'）；
if（背景图像！=“无”&&display！=“无”）{
var wrapperDiv=inputField.wrap（“”）.parent（）；
css（'background-image'，inputField.css（'background-image'）；
wrapperDiv.css（'background-position-x'，inputField.css（'background-position-x'）；
wrapperDiv.css（'background-position-y'，inputField.css（'background-position-y'）；
css（'background-color'，inputField.css（'background-color'）；
css（'background-repeat'，inputField.css（'background-repeat'）；
wrapperDiv.css（'margin-left'，inputField.css（'margin-left'）；
wrapperDiv.css（'margin-top'，inputField.css（'margin-top'）；
wrapperDiv.css（'margin-right'，inputField.css（'margin-right'）；
wrapperDiv.css（'margin-bottom'，inputField.css（'margin-bottom'）；
css（'margin'，0）；
css（'background-image'，'none'）；
css（'background-color'，'transparent'）；
wrapperDiv.css（'zoom'，1）；
css（'display'，'inline'）；
}
});
}
});
background附件刚刚对IE6起作用，但在IE7中，整个背景现在都消失了。啊，笨蛋！背景没有消失，但现在已固定到实际窗口。没有帮助你的问题，只是一个澄清。背景附件刚刚适用于IE6，但在IE7中，整个背景现在都消失了。啊，笨蛋！背景没有消失，但现在已固定到实际窗口。对你的问题没有帮助，只是澄清一下。你怎么会遇到和我一样的问题呢。我看到了这个Adobe链接，其中包含更多信息：你怎么会遇到与我完全相同的问题。我看到了这个Adobe链接，里面有更多的信息：你有解决方案吗：@FranciscoCorrales:我认为没有好的（仅CSS）解决方案。HTML更改（或JavaScript）是必需的，类似于我在这个答案中所做的。隐藏IE7/8的图像甚至不是什么大事，除非它影响到绝大多数用户。如果你能提供一个，我可以快速看一下。谢谢。我已经放弃了wit I.E.8，我通过隐藏图像和解决方法来做到这一点。。。我本来不想去，但我8岁了