Maison >interface Web >tutoriel HTML >td中height为100%的input实际高度不一样。_html/css_WEB-ITnose
td中height为100%的input实际高度不一样。_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 11:50:152275parcourir
我先说我的意图。
我在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> Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：HTML 时间控件_html/css_WEB-ITnoseArticle suivant：前端优化还可以这么优化！_html/css_WEB-ITnose