黑马程序员技术交流社区

标题: HTML ie排版问题 [打印本页]

作者: 刘欢    时间: 2013-4-26 22:28
标题: HTML ie排版问题
本帖最后由 刘欢 于 2013-4-27 14:15 编辑

相同的代码在i搜狗浏览器中,使用IE兼容模式下排版没有对齐,而在高速模式下排版都对齐了。为什么?如何在ie模式下更改代码让其对齐?
代码:
  1. <body>
  2. <table border="0">
  3. <tr align="right"><td><label name="username">用户名:</label></td><td><input name="username" type="text" /></td></tr>
  4. <tr align="right"><td><label name="password1">密码:</label></td><td><input name="password1" type="password" /></td></tr>
  5. <tr><td><label name="password2">确认密码:</label></td><td><input name="password2" type="password" /></td></tr>
  6. <tr align="right"><td><label name="email1">邮件:</label></td><td><input name="email1" type="text" /></td></tr>
  7. <tr><td><label name="email2">确认邮箱:</label></td><td><input name="email2" type="text" /></td></tr>
复制代码

IE兼容模式.jpg (34.52 KB, 下载次数: 0)

IE兼容模式.jpg

高速模式.jpg (60.67 KB, 下载次数: 0)

高速模式.jpg

作者: 李志敏    时间: 2013-4-26 22:48
本帖最后由 李志敏 于 2013-4-26 22:54 编辑
  1. <body>
  2. <table border="0">
  3.         <tr ><td align="right"><label name="username">用户名:</label></td><td><input name="username" type="text" /></td></tr>
  4.         <tr ><td align="right"><label name="password1">密码:</label></td><td><input name="password1" type="password"  style="width:152px;"/></td></tr>
  5.         <tr ><td align="right"><label name="password2">确认密码:</label></td><td><input name="password2" type="password" style="width:152px;"/></td></tr>
  6.         <tr ><td align="right"><label name="email1">邮件:</label></td><td><input name="email1" type="text" /></td></tr>
  7.         <tr><td><label name="email2">确认邮箱:</label></td><td><input name="email2" type="text" /></td></tr>
  8. </table>
  9. </body>
复制代码
你的align=“right” 要写在td里面  还有 密码框的长度跟文本框的长度不一样 需要单独用css样式style="width:152px;" 设置长度
作者: 许庭洲    时间: 2013-4-26 22:52
浏览器兼容性问题,IE6,IE7对table.appendChild("tr")的支持和IE8不一样,用insertRow, insertCell来代替或者表格添加tbody,然后向tbody中添加tr。FF不支持InenerText.
作者: 极限冰风    时间: 2013-4-26 22:57
<body>
<table border="0">
<tr ><td style="text-align:right"><label name="username">用户名:</label></td><td><input name="username" type="text" /></t></tr>
<tr ><td  style="text-align:right"><label name="password1">密码:</label></td><td><input name="password1" type="password"  /></td></tr>
<tr><td><label name="password2">确认密码:</label></td><td><input name="password2" type="password" /></td></tr>
<tr align="right"><td><label name="email1">邮件:</label></td><td><input name="email1" type="text" /></td></tr>
<tr><td><label name="email2">确认邮箱:</label></td><td><input name="email2" type="text" /></td></tr>
</body>

写的代码要符合W3C的规则,一句代码只写一行,一般不推荐使用行内样式,要使用外部样式,
作者: 刘欢    时间: 2013-4-27 12:01
极限冰风 发表于 2013-4-26 22:57
用户名:
密码:
确认密码:

你好,多谢指导,但是对行内样式和外部样式没有什么概念,希望再指导指导。
作者: 刘欢    时间: 2013-4-27 12:02
许庭洲 发表于 2013-4-26 22:52
浏览器兼容性问题,IE6,IE7对table.appendChild("tr")的支持和IE8不一样,用insertRow, insertCell来代替或 ...

这个有点高了,等我把基础搞好了
作者: 刘欢    时间: 2013-4-27 12:04
李志敏 发表于 2013-4-26 22:48
你的align=“right” 要写在td里面  还有 密码框的长度跟文本框的长度不一样 需要单独用css样式style="widt ...

   多   谢




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2