如何防止背景图像在IE中的表单字段中滚动？ [英] How to prevent background image from scrolling in form field in IE?

问题描述

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

The problem is in IE7 and 6 (I have to support 6 at work).

.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结束？

In IE when you type in the input field, once you reach the end the image stops repeating and text is shown without any background image in the back of the input field. In firefox and other browsers including IE8 the text just scrolls but the image stays in place. Why does it end in IE7 and 6?

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

P.S. I can't remove no-repeat in the image since it has borders and you can tell it's repeating in a weird way.

推荐答案

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

Tested in IE6/7/8 / Firefox / Chrome.

在每个输入周围添加包装器 div ：

Add wrapper div around each input, like this:

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

It's not fantastic, but it works. A more eloquent way would be to add the wrapper div and modify the styles using JS if the browser is <=IE7.

这篇关于如何防止背景图像在IE中的表单字段中滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！