none
IE8显示浮动框宽度问题 RRS feed

  • 问题

  • 请看下列xml文件(注意:文件名为a.xml):

    <?xml version="1.0" encoding="UTF-8"?>
    <?xml-stylesheet type="text/xsl" href="a.xml"?>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
      <title>...</title>
      <style>
        body {
          margin: 0px;
          padding: 0px;
        }
        
        #side_bar {
          margin: 0px 0px 0px 0px;
          padding: 20px 2% 60px 2%;
          width: 16%;
          border: 1px solid black;
          background-color: #55FF55;
          float: left;
        }
    
        #content {
          margin: 0px 0px 0px 0px;
          padding: 20px 2% 60px 2%;
          width: 75%;
          border: 1px solid black;
          background-color: #55FF00;
          float: right;
        }
      </style>
    </head>
    
    <body>
    
        <div id="side_bar">
            <p>左侧浮动框内容</p>
        </div>
    
        <div id="content">
            <p>右侧浮动框内容</p>
        </div>
    
    </body>
    </html>





    该文件在IE中显示时,左右浮动框之间有很大空隙,但在Firefox中显示是正常的。

    看来,IE8解决了HTML标记中margin, padding和width三者之间的怪异关系,但对XML及XHTML等却没有消除类似的非标准怪异!

    • 已编辑 r01cn 2009年5月11日 16:41
    2009年5月11日 16:27

答案

  • 当然,这个问题也还是有办法解决的,下面我给一个解决方案:

    <?xml version="1.0" encoding="UTF-8"?>
    <?xml-stylesheet type="text/xsl" href="a.xml"?>
    
    <html xmlns="http://www.w3.org/1999/xhtml"
          xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xsl:version="1.0">
    
    <head>
        <title>...</title>
        <style>
            body {
                margin: 0px;
                padding: 0px;
            }
    
            #left_outer {
              margin: 0px;
              width: 20%;
              border: none;
              background-color: #55FF55;
              float: left;
            }
        
            #left_inner {
              margin: 20px 5% 60px 5%;
              max-width: 100%;
              border: none;
              background-color: #DDDDDD;
            }
        
            #right_outer {
              margin: 0px;
              padding: 0px;
              width: 80%;
              border: none;
              background-color: #DDDDDD;
              float: right;
            }
        
            #right_inner {
              margin: 20px 10% 60px 2%;
              max-width: 100%;
              border: none;
              background-color: #55FF55;
            }
        </style>
    </head>
    
    <body>
    
        <div id="left_outer">
            <div id="left_inner">
                <p>左侧浮动框内容</p>
            </div>
        </div>
    
        <div id="right_outer">
            <div id="right_inner">
                <p>右侧浮动框内容</p>
            </div>
        </div>
    
    </body>
    </html>
    实现的关键是每个浮动框使用了两层 div 块,内层 div 块中使用了 max-width 宽度设置。

    到此,我想版主应当将此问题设置为“已解决”了。


    • 已标记为答案 r01cn 2009年5月28日 18:38
    2009年5月28日 16:52

全部回复

  • 又,若将上述代码的前两行删除,并将文件保存为.html文件,则显示完全正常。

    由此可见,IE8在浏览基于XML的应用时,很可能出现问题。
    2009年5月11日 16:46
  • 请问你贴出来的代码全部是 a.xml 里的?Firefox中还显示正常的? 你是按照什么标准写的? 

    你想用 xml + xsl  ?
    2009年5月12日 6:00
  • 是的,这是a.xml的全部代码,在Firefox中显示完全正常。
    我的代码符合W3C标准:XHTML、XML。
    以xml文件本身作为一个XSLT转换文件是XML标准允许的。这里,我只是为了做一个简便的演示,实际应用中当然是另外的xsl文件。
    2009年5月12日 10:06
  • 这个问题怎么没人回答了?这是不是IE的问题?IE的下一个版本会不会修正这类问题?
    2009年5月13日 16:17
  • 楼主,你好,

    我拷贝了你的代码,但是IE 和Firefox 都不能正常显示:
    IE8:

    The XML page cannot be displayed

    Cannot view XML input using XSL style sheet. Please correct the error and then click the Refresh button, or try again later.


    An invalid character was found in text content. Error processing resource 'file:///E:/MeshSharedFolder/Xhinker/TestFiles/a....

            <p>
    Firefox 3.0
    载入样式表单出错: 分析 XSLT 样式表单失败。
    Microsoft Online Community Support
    2009年5月19日 9:33
    版主
  • 楼主: XML + XSL 不是这样用的。 下面给你一个简单的例子:
    customers.xml 
    <?xml version='1.0'?>
    <?xml-stylesheet  type="text/xsl"   href="customers.xsl"?>
    <customers>
        <customer>
            <name>John   Smith</name>
            <address>123   Elm   St.</address>
            <phone>(123)   456-7890</phone>
        </customer>
        <customer>
            <name>Mary   Jones</name>
            <address>456   Oak   Ave.</address>
            <phone>(156)   789-0123</phone>
        </customer>
    	    <customer>
            <name>John   Smith</name>
            <address>123   Elm   St.</address>
            <phone>(123)   456-7890</phone>
        </customer>
        <customer>
            <name>Mary   Jones</name>
            <address>456   Oak   Ave.</address>
            <phone>(156)   789-0123</phone>
        </customer>    <customer>
            <name>John   Smith</name>
            <address>123   Elm   St.</address>
            <phone>(123)   456-7890</phone>
        </customer>
        <customer>
            <name>Mary   Jones</name>
            <address>456   Oak   Ave.</address>
            <phone>(156)   789-0123</phone>
        </customer>    <customer>
            <name>John   Smith</name>
            <address>123   Elm   St.</address>
            <phone>(123)   456-7890</phone>
        </customer>
        <customer>
            <name>Mary   Jones</name>
            <address>456   Oak   Ave.</address>
            <phone>(156)   789-0123</phone>
        </customer>    <customer>
            <name>John   Smith</name>
            <address>123   Elm   St.</address>
            <phone>(123)   456-7890</phone>
        </customer>
        <customer>
            <name>Mary   Jones</name>
            <address>456   Oak   Ave.</address>
            <phone>(156)   789-0123</phone>
        </customer>
    </customers>
    
    customers.xsl
    <?xml   version='1.0'?>
    <xsl:stylesheet   version="1.0"   xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
        <xsl:output   method="html"/>
        <xsl:template   match="/">
            <HTML>
                <style type="text/css">
                    body {font-size:14px;}
                    table { border:1px #cccccc solid;background-color:#efefef;}
                    td { background-color:#ffffff;}
                    tr:hover td { background-color:#FFFFAA;color:blue; } /* IE 7+ / ff  */
                </style>
                <BODY>
                    <center>
                        <TABLE cellpadding="5" cellspacing="5">
                            <xsl:for-each   select="customers/customer">
                                <TR>
                                    <xsl:apply-templates   select="name"   />
                                    <xsl:apply-templates   select="address"   />
                                    <xsl:apply-templates   select="phone"   />
                                </TR>
                            </xsl:for-each>
                        </TABLE>
                    </center>
                </BODY>
            </HTML>
        </xsl:template>
    
        <xsl:template   match="name">
            <TD  STYLE="font-weight:bold;">
                <xsl:apply-templates   />
            </TD>
        </xsl:template>
    
        <xsl:template   match="address">
            <TD STYLE="color:green;">
                <xsl:apply-templates   />
            </TD>
        </xsl:template>
    
        <xsl:template   match="phone">
            <TD >
                <xsl:apply-templates   />
            </TD>
        </xsl:template>
    
        <xsl:template match="text()">
            <xsl:value-of  select='.'/>
        </xsl:template>
    
    </xsl:stylesheet>
    
    希望对楼主有所帮助!

    2009年5月19日 14:12
  • Hi, Daniel Chow

    好久没上来了,今天才看到你的消息。

    请注意我的问题不是怎么用 xml + xsl,这个我会。

    我所提问题的实质是 xml 文件显示左右浮动框的内容时,IE 对两个浮动框的显示有宽度问题(其实这是IE的老问题了),IE8 并没有完全按照 W3C 标准纠正过来。

    我提这个问题只不过是希望通过你们把这个问题反馈给 IE 的开发人员,以便在将来的版本中纠正过来(不然我们开发人员连简单的CSS设计都会碰到头疼的问题)。

    我只不过想把问题简单明了一点,才想办法只用一个文件来说明问题,结果还是连你们这些 MSFT 们也没能明白。我不知道是我的表述有问题,还是你们没认真看,或者还没足够聪明。

    我前面给出的文件 a.xml 用 amaya 和 IE8 是可以显示的,Firefox 确实不能显示,我不知道你的 IE8 为什么不能显示。

    如果你确实需要看到具体情况,我可以把相关文件打个包发 mail 给你,保证你可以看到没有任何问题的显示结果。

    另外,你可以看一看我的另外一个贴子:IE8显示XML文件的浮动框宽度问题 。那里也许说得稍清楚一点。
    • 已编辑 r01cn 2009年5月27日 22:05 补充内容
    2009年5月27日 21:58
  • XML的样式表不是你这样写的吧,应该写成XSL或者之类的。。
    低调,低调
    哈哈,书出了,可以点这里购买哦。。
    2009年5月28日 3:53
  • 我什么时候在这里写过 xsl 了?

    xml 可以调用自身作为样式表,给个例子地址你看看:http://www.w3.org/Math/XSL/Overview-tech.html

    此文的最后部分就是一个例子。这可是w3的网站哦。
    2009年5月28日 5:42
  • Hi, Daniel Chow:

    前面的 a.xml 我改了一下,现在在 IE 和 Firefox 中显示都没问题了,你看一看。

    a.xml 代码如下:
    <?xml version="1.0" encoding="UTF-8"?>
    <?xml-stylesheet type="text/xsl" href="a.xml"?>
    
    <html xmlns="http://www.w3.org/1999/xhtml"
          xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xsl:version="1.0"
    >
    
    <head>
      <title>...</title>
      <style>
        body {
          margin: 0px;
          padding: 0px;
        }
        
        #side_bar {
          margin: 0px 0px 0px 0px;
          padding: 20px 2% 60px 2%;
          width: 16%;
          border: 1px solid black;
          background-color: #55FF55;
          float: left;
        }
    
        #content {
          margin: 0px 0px 0px 0px;
          padding: 20px 2% 60px 2%;
          width: 75%;
          border: 1px solid black;
          background-color: #55FF00;
          float: right;
        }
      </style>
    </head>
    
    <body>
    
        <div id="side_bar">
            <p>左侧浮动框内容</p>
        </div>
    
        <div id="content">
            <p>右侧浮动框内容</p>
        </div>
    
    </body>
    </html>




    2009年5月28日 5:57

  • 我的这个问题说到底是 IE8 并没有彻底地把 margin, padding 和 width 三者之间的关系按 W3C 的要求修正过来。

    IE6、IE7 以前对 HTML、XHTML 就有类似问题。现在,IE8 做了修正,但对 xml 应用,IE8 还是有问题。
    2009年5月28日 6:32


  • 请版主或者MSFT们给个说法,我想这个问题没必要再讨论下去了。

    事实证明就是IE的问题,请通过适当渠道告知IE开发人员,在以后的版本中解决。
    2009年5月28日 14:47
  • 当然,这个问题也还是有办法解决的,下面我给一个解决方案:

    <?xml version="1.0" encoding="UTF-8"?>
    <?xml-stylesheet type="text/xsl" href="a.xml"?>
    
    <html xmlns="http://www.w3.org/1999/xhtml"
          xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xsl:version="1.0">
    
    <head>
        <title>...</title>
        <style>
            body {
                margin: 0px;
                padding: 0px;
            }
    
            #left_outer {
              margin: 0px;
              width: 20%;
              border: none;
              background-color: #55FF55;
              float: left;
            }
        
            #left_inner {
              margin: 20px 5% 60px 5%;
              max-width: 100%;
              border: none;
              background-color: #DDDDDD;
            }
        
            #right_outer {
              margin: 0px;
              padding: 0px;
              width: 80%;
              border: none;
              background-color: #DDDDDD;
              float: right;
            }
        
            #right_inner {
              margin: 20px 10% 60px 2%;
              max-width: 100%;
              border: none;
              background-color: #55FF55;
            }
        </style>
    </head>
    
    <body>
    
        <div id="left_outer">
            <div id="left_inner">
                <p>左侧浮动框内容</p>
            </div>
        </div>
    
        <div id="right_outer">
            <div id="right_inner">
                <p>右侧浮动框内容</p>
            </div>
        </div>
    
    </body>
    </html>
    实现的关键是每个浮动框使用了两层 div 块,内层 div 块中使用了 max-width 宽度设置。

    到此,我想版主应当将此问题设置为“已解决”了。


    • 已标记为答案 r01cn 2009年5月28日 18:38
    2009年5月28日 16:52