如何防止背景图像在 IE 的表单域中滚动？

Question

问题出在 IE7 和 6 上（工作中我必须支持 6）。

.myForm input { background: url(../images/input_bg.jpg) no-repeat; }


<form class='myForm'>
     <input type="text" />
     <input type="text" />
     <button>Submit</button>
</form>

在 IE 中，当您在输入字段中键入内容时，一旦您到达末尾，图像就会停止重复，并且在输入字段后面显示的文本没有任何背景图像。在 Firefox 和包括 IE8 在内的其他浏览器中，文本只是滚动，但图像保持在原位。为什么以IE7和6结尾？

附：我无法删除图像中的 no-repeat，因为它有边框，你可以看出它以一种奇怪的方式重复。

Answer 1

在 IE6/7/8 / Firefox / Chrome 中测试。

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

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

像这样使用 CSS：

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

这不是太棒了，但它确实有效。一个更有说服力的方法是添加包装器div，如果浏览器是

Answer 2

以下 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');
            }
        });
    }
});

Answer 3

我没有 IE6 或 7 可以测试，但你试过 background-attachment: fixed 吗？