none
w3c标准+ie8 引起的郁闷问题 RRS feed

  • 问题

  • 如下代码如果去掉<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">就可以正常显示,如果不去的话,那么ie6、ie7正常显示,ie8无法正常显示

    测试方法:在“内容”栏下面输入超过3行的文字,然后滚动右侧滚动条,我想知道在  w3c标准+ie8  环境下如何让背景也跟着一起滚动。
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
        <title>ie8中背景图片无法滚动的问题</title>
    </head>
    <body>
        <table cellpadding="3" rules="rows" style="border-style: solid none none none; width: 95%;
            border-collapse: collapse; border-top-width: 1px; border-top-color: #000000;
            font-size: 14px; font-family: 宋体, Arial, Helvetica, sans-serif;" frame="rhs">
            <tr>
                <td style="border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #000000"
                    width="35%">
                    日期:<input type="text" id="txt_Rq" style="border-width: 0px;" />
                </td>
                <td style="border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #000000"
                    width="47%">
                    讲课人:<input type="text" id="txt_Jkr" style="border-width: 0px; with: 80px; background-color: #f0f0f0;" />
                </td>
                <td style="border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #000000">
                    参加人数:<input type="text" id="txt_Cjrs" style="border-width: 0px; width: 40px;" />
                </td>
            </tr>
            <tr>
                <td style="border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #000000;
                    border-top-style: solid; border-top-width: 1px; border-top-color: #000000;" height="22"
                    colspan="3">
                    题目:<input type="text" id="txt_Tm" style="border-width: 0px; width: 90%; font-size: 11pt" />
                </td>
            </tr>
            <tr>
                <td style="border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #000000;
                    border-top-style: solid; border-top-width: 1px; border-top-color: #000000;" height="22"
                    colspan="3">
                    内容:
                </td>
            </tr>
            <tr>
                <td style="border-bottom-style: none; border-top-style: none;" height="22" colspan="3">
                    <textarea id="txt_Nr" rows="5" style="border-width: 0px; background-image: url(http://a23.photo.store.qq.com/http_imgload.cgi?/rurl4_s=b968c638ecdea20e17f38e392ef3161d9823b81e3f16ca6b3d3edda6976837bef7c780352c1d955f28a55c1b5c167d7f9e03153bddedd56cf32dda5e56b422338f5d4f202a3ed713214035c59ecb98ff49b57ad8);
                        width: 100%; font-size: 11pt; line-height: 24px; min-height: 100%;"></textarea>
                </td>
            </tr>
            <tr>
                <td style="border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #000000;
                    border-top-style: none" height="21" colspan="3">
                    缺席人补课情况:
                </td>
            </tr>
        </table>
    </body>
    </html>
    
    2009年8月9日 3:57

答案

  • 我记得上次就问过这个问题了,可以使用js来进行兼容
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
        <title>ie8中背景图片无法滚动的问题</title>
    </head>
    <body>
        <table>
            <tr>
                <td style="border-bottom-style: none; border-top-style: none;" height="22" colspan="3">
                    <textarea id="txt_Nr" rows="5" style="border-width: 0px; background: url(http_imgload.cgi.jpg);
                        width: 100%; font-size: 11pt; line-height: 24px;" onscroll="scrollBg(this)"></textarea>
                </td>
             </tr>
        </table>
    <script>
    function scrollBg(o)
    {
    o.style.backgroundPosition = "0 -" + o.scrollTop + "px"
    }
    </script>
    </body>
    </html>


    【孟子E章】
    • 已标记为答案 杜宏宇 2009年8月11日 4:58
    2009年8月10日 5:00
    版主
  • 使用那段脚本,都已经给你写出了,你拷贝,粘贴一下成htm测试下
    【孟子E章】
    • 已标记为答案 杜宏宇 2009年8月11日 4:58
    2009年8月10日 13:46
    版主

全部回复

  • 我这里貌似没什么问题 怎么测试结果都是一样的
    先声明 你的图片链接失败了 

    2009年8月9日 5:28
  • 用ie8浏览是会出问题的。图片也没有过期,图片就是一个小横线,模拟的信纸样式。
    ie6、ie7 随着输入内容的增多(超过3行),一条条小横线会随之滚动,但是到了ie8,小横线确不动。这样看起来很不舒服。

    2009年8月9日 6:29
  • 你先试试ff浏览器怎么样
    我这测试怎么都一个结果 看不出问题在哪
    2009年8月9日 6:39
  • background-attachment:fixed;
    【孟子E章】
    2009年8月10日 3:13
    版主
  • 孟老师,还是不行,麻烦你再试一下。

    2009年8月10日 3:51
  • ie8,ff3.5下都是可以的

    <textarea id="txt_Nr" rows="5" style="border-width: 0px; background: url(http_imgload.cgi.jpg);
                        width: 100%; font-size: 11pt; line-height: 24px;background-attachment:fixed;"></textarea>

    【孟子E章】
    2009年8月10日 4:41
    版主
  • 你是要一起滚动?
    默认就是一起滚动的啊

    【孟子E章】
    2009年8月10日 4:44
    版主
  • 我记得上次就问过这个问题了,可以使用js来进行兼容
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
        <title>ie8中背景图片无法滚动的问题</title>
    </head>
    <body>
        <table>
            <tr>
                <td style="border-bottom-style: none; border-top-style: none;" height="22" colspan="3">
                    <textarea id="txt_Nr" rows="5" style="border-width: 0px; background: url(http_imgload.cgi.jpg);
                        width: 100%; font-size: 11pt; line-height: 24px;" onscroll="scrollBg(this)"></textarea>
                </td>
             </tr>
        </table>
    <script>
    function scrollBg(o)
    {
    o.style.backgroundPosition = "0 -" + o.scrollTop + "px"
    }
    </script>
    </body>
    </html>


    【孟子E章】
    • 已标记为答案 杜宏宇 2009年8月11日 4:58
    2009年8月10日 5:00
    版主
  • 老师,不行的,加入background-attachment:fixed后还是不行,以下是加之后的代码,您看一下。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
        <title>ie8中背景图片无法滚动的问题</title>
    </head>
    <body>
        <table cellpadding="3" rules="rows" style="border-style: solid none none none; width: 95%;
            border-collapse: collapse; border-top-width: 1px; border-top-color: #000000;
            font-size: 14px; font-family: 宋体, Arial, Helvetica, sans-serif;" frame="rhs">
            <tr>
                <td style="border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #000000"
                    width="35%">
                    日期:<input type="text" id="txt_Rq" style="border-width: 0px;" />
                </td>
                <td style="border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #000000"
                    width="47%">
                    讲课人:<input type="text" id="txt_Jkr" style="border-width: 0px; with: 80px; background-color: #f0f0f0;" />
                </td>
                <td style="border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #000000">
                    参加人数:<input type="text" id="txt_Cjrs" style="border-width: 0px; width: 40px;" />
                </td>
            </tr>
            <tr>
                <td style="border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #000000;
                    border-top-style: solid; border-top-width: 1px; border-top-color: #000000;" height="22"
                    colspan="3">
                    题目:<input type="text" id="txt_Tm" style="border-width: 0px; width: 90%; font-size: 11pt" />
                </td>
            </tr>
            <tr>
                <td style="border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #000000;
                    border-top-style: solid; border-top-width: 1px; border-top-color: #000000;" height="22"
                    colspan="3">
                    内容:
                </td>
            </tr>
            <tr>
                <td style="border-bottom-style: none; border-top-style: none;" height="22" colspan="3">
                    <textarea id="txt_Nr" rows="5" style="border-width: 0px; background-image: url(http://a23.photo.store.qq.com/http_imgload.cgi?/rurl4_s=b968c638ecdea20e17f38e392ef3161d9823b81e3f16ca6b3d3edda6976837bef7c780352c1d955f28a55c1b5c167d7f9e03153bddedd56cf32dda5e56b422338f5d4f202a3ed713214035c59ecb98ff49b57ad8);
                        width: 100%; font-size: 11pt; line-height: 24px; background-attachment:fixed;"></textarea>
                </td>
            </tr>
            <tr>
                <td style="border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #000000;
                    border-top-style: none" height="21" colspan="3">
                    缺席人补课情况:
                </td>
            </tr>
        </table>
    </body>
    </html>
    
    2009年8月10日 8:30
  • 我用了ie8 7 6测试了你上面的代码都没问题!
    我怀疑你的浏览器有问题吧
    我的系统是vista ie8+IETester
    2009年8月10日 8:55
  • 我试了,ie6 7 没问题,ie8、firefox就不行了。图片不跟着滚动。

    2009年8月10日 9:04
  • 使用那段脚本,都已经给你写出了,你拷贝,粘贴一下成htm测试下
    【孟子E章】
    • 已标记为答案 杜宏宇 2009年8月11日 4:58
    2009年8月10日 13:46
    版主
  • 孟老大,我对你的佩服犹如滔滔江水,连绵不绝。又有如黄河泛滥,一发不可收拾。
    2009年8月11日 4:58