表格单元格iOS野生动物园中的100％高度按钮/标签/输入

Question

I can't find a way to do this

There seems to be padding placed above and below the element, although I have set it zero

https://plnkr.co/edit/WvEqNCxEcLY5yS1IT738?p=preview

<div>
   <button>hello</button>
</div>

<table><tr><td>
   <button>hiya</button>
</td></tr></table>

td,
div{
  padding: 0;
  height: 10em;
  border: solid;
}

button {
  height: 100%;
  width:100%;
  border:solid 10px #f00;
}

I don't want to use absolute position as the contents vary, and JS would be an overhead I couldn't live with!

Is there a known bug here? Would anyone have a link to it so I can watch it not get fixed for years and drives me to a stress related end

Thanks in advance

ios pic

chrome on win 10 (desired result)

Answer 1

The button, input, textarea, img, video, audio etc. are REPLACED ELEMENTS. The positioning rules for them are other than for standard elements. You can try to enclose replaced elements into a span or div.

Add <div/> inside <td/> and put <button/> into <div/> it will work properly. Add styles to new <div/> element and use:

button 
{
  height: 100%;
  width:100%;
  padding:0;
  margin:0;
}

<table><tr><td><div class="replaced-element-container"><button>hiya</button></div></td></tr></table>

Well, this is embarrassing but it meets W3C requirements.

Answer 2

For one table cell in the row:

td,  div
{
   padding: 0;
   height: 10em;
   border: solid;
   display:block;
}

button 
{
   height: 100%;
   width:100%;
   border:solid 10px #f00;
}

But it doesn't resolve problem that button is replaced element. It is still in container made from <td/> element.