textarea的背景图片在IE7里无法显示

小海同学 · 发表于 2007-10-11 00:26:42

原来是这么写的：

textarea{background:url('color_pen.gif') no-repeat fixed 100% bottom; }

在IE6里可以正常显示，可是到了IE7背景图里就显示不出来了，是不是兼容问题？应该如何改呢？

SSAY · 发表于 2007-10-11 08:29:55

区别不同浏览器，CSS hack写法：

区别IE6与FF：
background:orange;*background:blue;
区别IE6与IE7：
background:green !important;background:blue;
区别IE7与FF：
background:orange; *background:green;
区别FF，IE7，IE6：
background:orange;*background:green !important;*background:blue;
注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;

复制代码

为预览区域（比如要在某个 div 中预览）添加样式：filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);。
为 AlphaImageLoader 设置 src 属性。

示例代码：

<?xml version="1.0" encoding="gb2312"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>本地图片预览代码（支持 IE6、IE7）</title>
<style type="text/css">
#newPreview
{}{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
</style>
<script type="text/javascript" language="javascript">
<!--
function PreviewImg(imgFile)
{
//原来的预览代码，不支持 IE7。
var oldPreview = document.getElementById("oldPreview");
oldPreview.innerHTML = "<img src="file:\\\" + imgFile.value + "" width="80" height="60" />";
//新的预览代码，支持 IE6、IE7。
var newPreview = document.getElementById("newPreview");
newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
newPreview.style.width = "80px";
newPreview.style.height = "60px";
}
-->
</script>
</head>
<body>
<p>说明：以下针对的是互联网情况，如果您在本地作测试，比如输入的地址是：http://127.0.0.1/，则可以看到全部预览。</p>
<hr />
<p>如果您使用的是 IE6，则可以看到以下预览；如果您使用的是 IE7，则看不到以下预览。</p>
<div id="oldPreview"></div>
<hr />
<p>不论您使用的是 IE6 还是 IE7，均可以看到以下预览。</p>
<div id="newPreview"></div>
<hr />
<p>请选择一个图片进行预览：<input type="file" size="20" onchange="javascript:PreviewImg(this);" /></p>
</body>
</html>

复制代码

SSAY · 发表于 2007-10-11 08:40:11

textarea{background:url('color_pen.gif') no-repeat fixed 100% bottom; }

还有个规则：

ＣＳＳ的写法：textarea{background:url('color_pen.gif') no-repeat fixed 100% bottom; }
是错误的．．

书写形式：
<div class="textarea"></div>
ＣＳＳ为：

.textarea{background:url('color_pen.gif') no-repeat fixed 100% bottom; }

复制代码

注意前面有个点
或者不加双引号试下！

[ 本帖最后由 SSAY 于 2007-10-11 08:41 编辑 ]

SSAY · 发表于 2007-10-11 08:43:27

希望能帮到你，更好的读写．．．
如果我的解答也不能帮助你，请楼下的也来回答下吧！

小海同学 · 发表于 2007-10-12 00:13:25

非常感谢前辈！！！正在学习中！~~

123752619 · 发表于 2007-10-12 00:18:14

好贴，只可惜偶不能评分！

小海同学 · 发表于 2007-10-12 00:29:55

又有问题。。。
原来是这样的，HTML里：
<textarea name=memo rows=4 style='width:300' ></textarea>
CSS表里：
textarea{background:url('color_pen.gif') no-repeat fixed 100% bottom; }
这么用是错误的吗？但是在IE6里面背景图显示是正常的，就是在IE7里不行
这个应该怎么改呢？

		自动登录	找回密码
密码			立即注册

[疑难] textarea的背景图片在IE7里无法显示

评分