A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 李君言 中级黑马   /  2013-5-1 23:15  /  12363 人查看  /  4 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 李君言 于 2013-5-3 00:10 编辑

<html>
<head>
<title></title>
</head>
<body>
  <table>
    <tr>
      <td>用户名</td><td><input type="text" size="30"/></td>
    </tr>
    <tr>
      <td>密码</td><td><input type="password" size="30"/></td>
  </table>
</body>
</html>

上面我把"text"和"password" 的size都设置成了30,但是在浏览器显示的时候宽度却不一样,
是不是我设置方法有问题?
跟浏览器有没有关系?
不设置size时,宽度就一样,但是是默认的宽度

评分

参与人数 1技术分 +1 收起 理由
苏波 + 1

查看全部评分

4 个回复

正序浏览
本帖最后由 张伟86 于 2013-5-2 09:50 编辑

是浏览器内核影响的。可以使用input标签的width属性来定义文本框长度,可以避免长度不一样的情况(css就是好,美观在哪里呢?就在这里)。例如修改代码如下:
  1. <html>
  2. <head>
  3. <title></title>
  4. </head>
  5. <body>
  6.   <table>
  7.     <tr>
  8.       <td>用户名</td><td><input type="text" size="30"/></td>
  9.     </tr>
  10.     <tr>
  11.       <td>密码</td><td><input type="password" size="30"/></td>
  12.     </tr>

  13.     <tr>
  14.         <td>用户名</td><td><input type="text" name="textfield" style="width:100px" /></td>
  15.     </tr>
  16.     <tr>
  17.         <td>密码</td><td><input type="password" name="textfield2" style="width:100px" /></td>
  18.     </tr>
  19. </table>
  20. </body>
  21. </html>
复制代码
结果如图(chrome/猎豹/IE8测试结果):

1_text.jpg (14.29 KB, 下载次数: 43)

1_text.jpg

1_text_chrome(liebao).jpg (21.15 KB, 下载次数: 25)

1_text_chrome(liebao).jpg

评分

参与人数 1技术分 +1 收起 理由
苏波 + 1

查看全部评分

回复 使用道具 举报
这些东西其实不必过于在意的!每一个浏览器的内核都有不一样!像你这种情况,可以升级IE版本!或者只能使用其他浏览器!主要用在主流浏览器上测试!在不同的浏览器上,页面上还是会有一些差别的。比如常见的IE和火狐,我的软件页面在两种浏览器上是有一定的差别的!这就是内核的差异!但还是有一些浏览器是可以通用的!一般来说,360和IE的效果是一样的!
回复 使用道具 举报
刘茂林 发表于 2013-5-1 23:48
不要用table 你看我的。。

还有 貌似你的没问题 我试过了


这个是我测试我写的那个代码的图,难道是浏览器问题?我的是IE10
回复 使用道具 举报
本帖最后由 刘茂林 于 2013-5-1 23:50 编辑
  1. <html>
  2. <body>
  3. <form>
  4. 用户:
  5. <input type="text" name="user" size="30">
  6. 密码:
  7. <input type="password" name="password" size="30">
  8. </form>
  9. <p>
  10. </p>
  11. </body>
  12. </html>
复制代码
不要用table 你看我的。。

还有 貌似你的没问题 我试过了

评分

参与人数 1技术分 +1 收起 理由
苏波 + 1

查看全部评分

回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马