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

回复讨论(解决方案)

首頁

web前端

html教學

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:50 AM

我先说我的意图。
我在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>

登入後複製

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7814

Java教學

1646

CakePHP 教程

1402

Laravel 教程

1300

PHP教程

1238

Related knowledge

HTML容易為初學者學習嗎？ Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML中起始標籤的示例是什麼？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。