首页 > web前端 > html教程 > td中height为100%的input实际高度不一样。_html/css_WEB-ITnose

td中height为100%的input实际高度不一样。_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 11:50:15
原创
2275 人浏览过

我先说我的意图。
我在td中放置了一个input,这个input的高度设置为100%。
我不希望把input的高度设置为固定像素,因为我想要这个input自适应td的高度。
自适应是没有问题的,td高度增大,input的高度随之增大。

但问题是,在不同的浏览器中。input的实际高度不相同。似乎chrom,opera,safri没有遵守盒子模型,高度和在firefox里不一致。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">不同浏览器下,input的高度不同<table style="width: 100px; height: 40px;" border="0" cellpadding="0" cellspacing="0"><tbody style="height: 40px;"><tr style="height: 40px;">	<td style="height: 40px;" valign="middle">	<input name="title" style="width: 100%; height: 100%;border:5px solid blue;padding:5px;background-color:transparent;">	</td></tr></tbody></table>
登录后复制

我的问题是:
不要设置input为固定高度,怎么让input的实际高度在firefox;chrome中相同。


回复讨论(解决方案)

<style>html,body,table,tr,td,input{margin:0;padding:0;border:0;}td{display:block;}</style>
登录后复制

请仔细了解下盒模型.

谢谢楼上的回答, 但我还是要保留input的padding和border宽度。

问题已解决,我给input外层增加了一个div来解决这个问题。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">不同浏览器下,input的高度不同<style>.MNK_BORDER_BOX{	overflow:hidden;	box-sizing:border-box;	-moz-box-sizing:border-box;	-webkit-box-sizing:border-box;	padding:2px;}</style><div style="width: 100px; height: 40px;"><table style="width: 100px; height: 40px;" border="0" cellpadding="0" cellspacing="0"><tbody style="height: 100%;"><tr style="height: 100%;">	<td style="height: 100%;" valign="middle">	<div style="overflow:hidden;height:100%;">		<input name="title" class="MNK_BORDER_BOX" style="width: 100%; height: 100%;border:5px solid blue;padding:5px;background-color:transparent;">    </div>	</td></tr></tbody></table></div>
登录后复制

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板