Why do the text box set to 100% and the div set to 100% have different widths_html/css_WEB-ITnose

<table style="width:200px">        <tr>            <td style="padding-right:4px">                <input id="Text1" type="text" style="width:100%;height:16px;border:1px solid #b7d1eb" />            </td>        </tr>        <tr>            <td style="padding-right:4px">                <div style="width:100%;height:16px;border:1px solid #b7d1eb">                </div>            </td>        </tr>    </table>

I want two alignment effects, that is, when the width of the text box and div is set to 100%, they are visually the same width and need to be aligned. How to write css style.

Reply to the discussion (solution)

I tried it, and it felt inconsistent to set both elements to 100%, but I can set the width of the div to 99% , if the length does not exceed 300, they will appear to be uniform visually

This will definitely tell you that it is a browser problem. It's not aligned under IE9, it's aligned under Firefox, it's aligned under Apple. Therefore, at this time, it is recommended to write in a way that is compatible with multiple browsers, and it is not recommended to write div

in the table.