Html 删除注释元素（<；div>；），在显示<；时调整大小；输入>；

正如您在JSFIDLE中看到的，当您更改单选按钮时，按钮的div和底部div会自行移动。 这是由于收音机的字体和日期输入造成的，因为使用“正常”字体是不会发生的，但它也非常具有注释性。我怎样才能解决这个问题

这里是HTML，JSFIDLE中是CSS和JS

<div id="cont" class="write">      
    <div>
        <div>TEXT</div>
        <div>some text some text some text some text some text </div>
    </div>

    <div>
         <input type="radio"
                name="att"
                id="on"
                value="on"
                onclick="showFrom(this)"
         />
         <label for="on">On</label>

         <input type="radio"
                name="att"
                id="on_f"
                value="on_f"
                onclick="showFrom(this)"
                checked="checked"
         />
         <label for="on_f">From:</label>

         <input type="date"
                id="on_f_d"
                name="on_f_d"
                disabled="disabled"
                placeholder="dd.mm.yyyy"
        />
    </div>

    <div>
        <div>TEXT</div>
        <div>some text some text some text some text some text </div>
    </div>
</div>

正文
一些文本一些文本一些文本一些文本一些文本一些文本
在…上
发件人：
正文
一些文本一些文本一些文本一些文本一些文本一些文本

我不清楚问题出在哪里。我没有看到任何字体变化或方框移动。。。Firefox/MacMac不支持Segoe，Firefox也不支持：这是因为你没有问题。如果字体改变了元素的大小，那么你需要设置一个固定的宽度/高度，这样它们就不会扩展并影响周围的区域。