2020年2月16日09:11:45，Warma Fans页面的bug修复记录

今天在为Warma制作百万粉丝祭的时候出现了一个问题：

 

窗口缩放之前，一切正常

 然后我把Chrome浏览器关闭最大化，把窗口宽度缩小，就变成了这个，看图：

浏览器窗口宽度变小后，搜索按钮超出了边框范围

当然，即使我没有输入任何内容也会出现这个问题

根据我开发的顺序，我先做的是搜索框&搜索按钮&“沃”按钮，在那个时候没有出现这个问题，在添加了清除按钮之后出现了问题，看一下代码，不难得出结论：

<!--输入框和搜索键-->
<div id="sch">
    <input type="text" placeholder="Input..." id="schbox" required="required" onkeydown="schboxKeydown();" title="Type in what you want."/>
    <input type="button" id="sch-go" value=">" onclick="search();" title="Let's go!">
    <input type="button" id="clean" value="×" onclick="clean();">
</div>
<!--Warma!!!-->
<div id="warma-box">
    <input type="button" id="warma-box-space" value="" onclick="EasterEgg();" title="Easter egg here!">
    <input type="button" id="warma" value="沃" onclick="Warma();" title="Let us go to the Bilibili space of Warma!!!">
</div>
<!--代码里好像直接就把EasterEgg放出来了，算了不管了，连二年级的学生都能用F12查看源代码找到它-->

clean会在schbox有输入内容时出现，由于我的schbox的width是95%，根据浏览器对元素长宽的计算规则不难发现，所以是引入clean的宽度引起的问题。所以我们只需要改一下schbox就可以解决问题。

那，修改百分比？(1分)答：大错特错。

正确的达到效果的方法是，schbox的width改为

width: calc(100% - 38px);

38px是搜索按钮的宽度，这样就可以有效防止错位问题——强行规定schbox的宽度，和紧靠在后面的搜索按钮一起正好被嵌在外面的sch中。 

---

 作者语文不好，技术不精湛，可能存在疏漏或描述不清等问题，请读者慧眼察过，谨求指出错误。

---

沃玛天下第一！！！