Question

我在ie8中遇到了背景图像的问题。这是html页面。我在ie8测试。



<!DOCTYPE html>
<html>
<HEAD>
    <TITLE>Test background icon</TITLE>
    <STYLE type=text/css>
        .ctNewIconOnlyTxt {
            background: url('images/icons/icon_test.gif') right top no-repeat !important;
            background-color: #F2F2F2;
            padding-right: 16px;
        }

    </style>
</HEAD>
<BODY>
    <LABEL>Description </LABEL>
    <TEXTAREA style="WIDTH: 565px; HEIGHT: 83px;"  
            class="ctNewIconOnlyTxt" >testing for star icon for new 
            </TEXTAREA>
</BODY>
</html>

<!DOCTYPE html> <html> <HEAD> <TITLE>Test background icon</TITLE> <STYLE type=text/css> .ctNewIconOnlyTxt { background: url('images/icons/icon_test.gif') right top no-repeat !important; background-color: #F2F2F2; padding-right: 16px; } </style> </HEAD> <BODY> <LABEL>Description </LABEL> <TEXTAREA style="WIDTH: 565px; HEIGHT: 83px;" class="ctNewIconOnlyTxt" >testing for star icon for new </TEXTAREA> </BODY> </html>

问题是背景图像隐藏在textarea的滚动条后面。如果我删除了然后在滚动条之前显示图像。有人可以向我解释问题是什么以及解决方法是什么？

Answer 1

如果没有DOCTYPE声明，Web浏览器将以怪异模式呈现页面。这意味着不同的浏览器会以非标准的方式解释这些标签，通常会导致混乱的外观。

滚动条应位于textarea背景的顶部。（这是背景！）

如果要隐藏滚动条，请指定滚动条不可见。

textarea {
border : none;
overflow: hidden;
}

另一种方法是使用iFrame代替TextArea。

Answer 2

以下是我的工作：



.ctNewIconOnlyTxt {   
    background: url('images/icons/icon_test.gif') 96% top no-repeat !important;
    background-color: #F2F2F2;
 }

.ctNewIconOnlyTxt { background: url('images/icons/icon_test.gif') 96% top no-repeat !important; background-color: #F2F2F2; }

我在案例中更改了关键字的百分比right，以便显示图标而不会隐藏在滚动条后面。

Answer 3

比将水平背景位置设置为96％更好的解决方法是恕我直言，将其置于100％并更改（调整大小）图像本身，使其具有所需的像素数量作为右侧的填充。

TextArea背景图像在滚动条后面消失 - html 5

3 个答案: