ie6和7里的input_html/css_WEB-ITnose-HTML Tutorial-php.cn

input ie html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">*{margin:0px; padding:0px}table{ border-collapse:collapse; border-spacing:0}</style></head><body>	<table>		<tr>			<td>				<input type="text" style="width:100px; height:50px; background:red; border:2px solid black" />			</td>		</tr>		<tr>			<td>				<input type="text" style="width:100px; height:50px; background:yellow; border:2px solid black" />			</td>		</tr>		<tr>			<td>				<div style="background:#138eee; width:100px; height:50px; border:2px solid black"></div>			</td>		</tr>	</table></body></html>

Copy after login

1. 可以看到 -> input的上下会多出一像素
2. 用 -> float:left可以解决这个问题
3. 请问是否有其它方法能解决这个问题,因为有时候一行内要写很多标签,浮动起来就比较麻烦

回复讨论(解决方案)

这个貌似是td里的空格造成的，换成下面的试下

<td><input type="text" style="width:100px; height:50px; background:red; border:2px solid black" /></td>

Copy after login

空格原先就试过不行的...继续求解...

为啥要用table呢？用div不行么？

我试了好多种方法都不行，看来只能用float了，后面再加个

试了下，没有出现楼主所说的那种情况，两个input之间的boder加粗了而已。

border-spacing这个属性只有在border-collapse这个属性的属性值设置为sepeate时才有效。

表头

试了下，没有出现楼主所说的那种情况，两个input之间的boder加粗了而已。
楼主说的是IE6/IE7会出现这个问题。我试了下，的确如此！

如果把input换成div则不会出现间隙，
所以可能是input元素在表格在IE6/IE7下的问题，
经测试，下面的代码可以解决这个间隙问题：

input{ margin: -1px 0; }

Copy after login

Related labels：

ie6和7里的input

source：php.cn

Previous article：正常页面在火狐中显得略小，求解决。_html/css_WEB-ITnose Next article：css实现一行显示三张图片且多行显示问题。。_html/css_WEB-ITnose

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn