Home >Web Front-end >HTML Tutorial >The actual height of the input in td with a height of 100% is different. _html/css_WEB-ITnose
The actual height of the input in td with a height of 100% is different. _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:50:152275browse
Let me tell you my intention first.
I placed an input in td and set the height of this input to 100%.
I don’t want to set the height of the input to a fixed pixel, because I want this input to adapt to the height of the td.
There is no problem with self-adaptation. As the height of td increases, the height of input increases accordingly.
But the problem is, in different browsers. The actual height of the input is not the same. It seems that chrom, opera, and safri do not comply with the box model, and the height is inconsistent with that in 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>
My question is:
Instead of setting the input to a fixed height, how can I make the actual height of the input the same in Firefox and Chrome.
Reply to the discussion (solution)
<style>html,body,table,tr,td,input{margin:0;padding:0;border:0;}td{display:block;}</style> Please understand the box model carefully.
Thank you upstairs Answer, but I still want to retain the padding and border width of the input.
The problem has been solved. I added a div to the outer layer of the input to solve this problem.
<!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>