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结尾？

P.S。我无法删除图像中的无重复，因为它有边框，你可以用一种奇怪的方式告诉它重复。

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并使用JS修改样式，如果浏览器是＆lt; = IE7。

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吗？

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

3 个答案: