鸟食轩

 Microsoft .NET[C#] MVP 2003
随笔 - 429, 文章 - 235, 评论 - 5527, 引用 - 356
数据加载中……

IE解析完全相同html代码的不同表现

    昨天晚上一不小心被IE折磨惨了，明明在*.htm中显示非常完美的HTML代码，原样放入*.aspx文件中后，就完全歇菜啦！俺把doctype也折腾了个遍，还是丝毫不得要领。难道是传说中的rpwt?! 如果您有任何讲解和建议，请不吝赐教。

    为了突出问题，我就做一个简化了的示例来表示。看如下html代码（其实超级简单，当然也正是越简单才能越说明问题，同时也就越郁闷）：
<table border="1" style="display: inline;">
    <tr>
        <td>
            <span style="font-family: Tahoma;">abc</span></td>
    </tr>
</table>
<table border="1" style="display: inline;">
    <tr>
        <td>
            <span style="font-family: Tahoma;">一二三</span></td>
    </tr>
</table>
<table border="1" style="display: inline;">
    <tr>
        <td>
            <span style="font-family: Tahoma;">一二三abc</span></td>
    </tr>
</table>

    就这个html代码片断，当我以不同的文件扩展名存储在服务器上，并用IE6访问时，居然得到完全不同的效果，下图分别是htm、aspx和asp三种类型文件显示的结果：
    HTM.ASPX.ASP.gif
    看出来*.aspx文件的问题了吗？html代码完全相同的三个文件，只有文件的扩展名不相同，用IE6访问，结果*.aspx文件中对于英文字体的显示和*.htm或*.asp不尽相同。在Tahoma这个字体下，英文内容的那个表格莫名其妙的别的表格矮了2px("abc" dropped 2px)。

    想了很久又反复试验了很多文档设置参数，依然不能让IE自身解决掉这个问题。最后实在是没办法了，使用添加外层的容器的方式，总算是勉强修正了*.aspx文件中显示纯英文容表格高度不足的问题。就是在table元素外添加div容器，然后让table高度为100%，代码示例为：
<div style="height: 1px;">
    <table border="1" style="display: inline;" height="100%">
        <tr>
            <td>
                <span style="font-family: Tahoma;">abc</span></td>
        </tr>
    </table>
    <table border="1" style="display: inline;" height="100%">
        <tr>
            <td>
                <span style="font-family: Tahoma;">一二三</span></td>
        </tr>
    </table>
    <table border="1" style="display: inline;" height="100%">
        <tr>
            <td>
                <span style="font-family: Tahoma;">一二三abc</span></td>
        </tr>
    </table>
</div>

    问题貌视是解决了，可是为什么*.aspx文件在IE中就会特殊呢？？？

    软件环境：
        1、Windows XP SP2 en, IE6 + SP1
        2、Windows 2003 SP1 en, IE6 + SP1

posted on 2006-05-23 12:43 birdshome 阅读(10074) 评论(22)  编辑 收藏 网摘 所属分类: Jscript&Dhtml开发

评论

#1楼    回复  引用  查看    

中英文的字体行高不一样，ASPX会区别开的，并且在ASPX中，中英文的垂直对齐方式也不一样，以前我也吃过它的亏；建议用CSS设置表格高度来解决！
2006-05-23 14:13 | Kerr      

#2楼    回复  引用    

web.config中reponse 的编码类型的问题？
2006-05-23 14:55 | Mirricle [未注册用户]

#3楼    回复  引用    

requestEncoding="gb2312"
responseEncoding="gb2312"

试了一下 改成这个就好了
2006-05-23 14:59 | Mirricle [未注册用户]

#4楼    回复  引用  查看    

一般是编码问题，看图片，aspx页面应该用的是默认的utf8编码，另外两个不是
2006-05-23 15:45 | FeelDesign      

#5楼 [楼主]   回复  引用  查看    

@Mirricle
非常感谢，果然是编码惹的祸。平时只有遇到乱码的时候才会想到编码问题，万万没有想到连显示上的差别也和编码有关@_@。我最开始是有点缘木求鱼啦
2006-05-23 15:53 | birdshome      

#6楼    回复  引用  查看    

这个情况我也遇到过,就是编码问题影响到排版..
2006-05-23 16:38 | torome      

#7楼    回复  引用    

楼主请问，下面一段html
<TABLE BORDER=1>
<TR>
<TD ID=oCell>This is a small table.<div id="ss" style="border:1 1 1 1 solid #000000;position:relative" >ssssss<div id="s" style="border:1 1 1 1 solid #000000;position:absolute;bottom:0">cccccc</div></div></TD>
</TR>
</TABLE>
我想考察bottom在父元素为relative中的定位。为什么浏览时会在table的外面出现，而如果我去掉"This is a small table",好像就正常了。在这里，"s"的offsetParent是"ss",那么bottom是不是应该对应"ss"来定位，为什么会跑到它table外面，而且去掉"This is a small table"位置还不一样？
2006-05-23 16:55 | Basil [未注册用户]

#8楼    回复  引用  查看    

xhtml惹的祸
2006-05-23 16:59 | 发仔      

#9楼 [楼主]   回复  引用  查看    

@Basil
你要什么效果啊？为什么要设置bottom来定位?!
ssssss
cccccc

加字后这样？
This is a small table.
ssssss
cccccc

2006-05-23 17:14 | birdshome      

#10楼    回复  引用    

我做了一个树状菜单，需要控制子菜单向上方展开还是向下展开(根据菜单的高度和上下方的空间），类似于window系统的菜单展开。向上展开的时候我想用bottom来判断
2006-05-23 20:50 | Basil [未注册用户]

#11楼    回复  引用    

我这边不加文字是这个效果
<IMG src="http://blog.donews.com/images/blog_donews_com/basilwang/112240/o_bottom1_632840145399449152.jpg" border=1>
加了文字是这种效果
<IMG src="http://blog.donews.com/images/blog_donews_com/basilwang/112240/o_bottom_632840144204530944.jpg" border=1>

加了文字后，为什么"ccccc"被挤到了table的外面？
2006-05-23 20:58 | Basil [未注册用户]

#12楼    回复  引用    

对不起，发错了，
不加文字的运行效果是，
http://blog.donews.com/images/blog_donews_com/basilwang/112240/r_bottom1_632840145399449152.jpg


加了文字的运行效果是
http://blog.donews.com/images/blog_donews_com/basilwang/112240/r_bottom_632840150269351728.jpg
2006-05-23 21:08 | Basil [未注册用户]

#13楼 [楼主]   回复  引用  查看    

@Basil
菜单是向上或向左，应该是根据它正常的出现位置与子菜单自身的高宽运算来获得的。比如你的子菜单正常的出现位置是(x0, y0)，菜单本身的高宽分别是parentHeight和parentWidth，子菜单的高宽分别是childHeight和childWidth，那么如果你希望菜单上展，新的菜单左上角位置就因该是(x0, y0-childHeight)，如果是希望左展开，那么新的菜单的左上角位置因该是(x0-parentWidth, y0)。
2006-05-23 21:19 | birdshome      

#14楼    回复  引用    

第一次发帖子，
不过只想说一句话：“小样，新来的吧！”
"0x7c921010"指令引用的"0x00000034"内存，不能为“read”!

我是：CR
2006-05-24 11:53 | CR [未注册用户]

#15楼    回复  引用    

搂主，谢谢了，我再看看。
2006-05-25 11:01 | Basil [未注册用户]

#16楼    回复  引用    

通过解析器出来的未必就一样,用FLASHGET下载再用ultraEdit之类的工具查看二进制编码.很容易就想到编码问题了.
2006-05-25 13:32 | RainChen [未注册用户]

#17楼    回复  引用    

刚才看到楼主在我博客的留言，十分感谢你。
我刚才已经把所有的[]标记改为<>，可能原来是由于我使用的离线blog工具“爱搞搞”不支持<>，今天发现好像这一bug已经修正，不是donews的事。
还有，不知道博客园是否支持类似地离线客户端blog工具，如果有的话，请告知。我十分乐意在博客园安家，毕竟与你这样的乐于助人的高手为邻也是十分荣幸的。在此对你无私的帮助表示感谢！
2006-05-25 21:08 | Basil [未注册用户]

#18楼    回复  引用  查看    

@Basil
只要是支持MetaWeblog的离线客户端blog工具都可以在博客园使用，比如：Zoundry Blog Writer。
详情请看：http://dudu.cnblogs.com/archive/2006/02/15/331414.html
欢迎您来博客园安家!
2006-05-25 21:39 | dudu      

#19楼    回复  引用  查看    

由于APSX会自动生成一组HTML标示头
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
所以导致你的页面显示 不正确

2006-05-31 10:33 | 大吃一碗      

#20楼    回复  引用    

编码问题，这种情况在做css+div的页面时尤其突出，以前因为这折腾了一天多，还有在使用外部包含的JS文件时也要注意这个问题。
2006-10-18 15:56 | efun [未注册用户]

#21楼    回复  引用    

两种方法　
一种　是改编码
另一种　是把字体设置成宋体。　
就不会出现这种问题
2009-02-26 15:03 | 2lin [未注册用户]

发表评论
姓名 [登录] [注册] 
主页
Email (仅博主可见) 
验证码 *  验证码看不清,换一张
内容(请不要发表任何与政治相关的内容)  
今天你闪了吗？

《C# 3.0设计模式》65折特惠
  登录  使用高级评论   新用户注册   返回页首      

导航: 网站首页 社区 新闻 博问 闪存 网摘 招聘 .NET频道 知识库 找找看 Google站内搜索



China-pub 计算机图书网上专卖店！6.5万品种 2-8折！
China-Pub 计算机绝版图书按需印刷服务

相关文章:

相关链接: