Javascript <；部门>；搜索渲染问题中的数字

因此，我有一些代码，其中jQuery和CSS在单击搜索图标后创建一个关闭图标。它使用相同的div元素，因为它应该为自己设置动画（在本例中不是这样）。在我工作时（不影响任何与以下搜索图标有关的内容），我意识到其中一个div的高度不合适。如果查看CSS，您会看到有两个div的类为“search2”，其中一个的高度或比例不正确。我试图调整窗口的大小，但它没有消失。

因此，我有一个搜索图标，其中包含以下代码：

函数切换搜索（）{
$（'.mobile search button'）。toggleClass（'expand'）；
}

.mobile搜索按钮{
位置：绝对位置；
顶部：5px；
右：15px；
宽度：50px；
高度：50px；
边界：无；
溢出：隐藏；
}
.移动搜索按钮*{
位置：相对位置；
底部：4px；
左：1px；
}
.search1{
宽度：12px；
高度：12px；
边框：2件纯黑；
边界半径：100px；
}
.search2{
宽度：10px；
高度：2倍；
背景：黑色；
-webkit变换：旋转（45度）平移（5px，-5px）；
-ms变换：旋转（45度）平移（5px，-5px）；
变换：旋转（45度）平移（5px，-5px）；
}
.search3{
不透明度：0；
}
.移动搜索按钮.搜索1{
-webkit变换：旋转（45度）平移（5px，-5px）比例（1.75）；
-ms变换：旋转（45度）平移（5px，-5px）比例（1.75）；
变换：旋转（45度）平移（5px，-5px）比例（1.75）；
}
.移动搜索按钮.搜索2{
-webkit变换：旋转（45度）平移（19像素，-9像素）比例（1.75）；
-ms变换：旋转（45度）平移（19像素，-9像素）缩放（1.75）；
变换：旋转（45度）平移（19像素，-9像素）比例（1.75）；
}
.mobile-search-button.expand.search 1{
-webkit变换：旋转（45度）平移（9像素，-10像素）缩放（5）；
-ms变换：旋转（45度）平移（9px，-10px）缩放（5）；
变换：旋转（45度）平移（9像素，-10像素）缩放（5）；
不透明度：0；
}
.mobile-search-button.expand.search 2{
-webkit变换：旋转（45度）平移（9px，-9px）缩放（1.75）缩放（2）；
-ms变换：旋转（45度）平移（9px，-9px）缩放（1.75）缩放（2）；
变换：旋转（45度）平移（9px，-9px）缩放（1.75）缩放（2）；
}
.mobile-search-button.expand.search 3{
-webkit变换：旋转（-45度）平移（10px，7px）缩放（1.75）缩放（2）；
-ms变换：旋转（-45度）平移（10px，7px）缩放（1.75）缩放（2）；
变换：旋转（-45度）平移（10px，7px）缩放（1.75）缩放（2）；
不透明度：1；
}

---

我认为CSS可以做得更简单

函数切换搜索（）{
$（'.mobile search button'）。toggleClass（'expand'）；
}

.mobile搜索按钮{
位置：绝对位置；
顶部：5px；
右：15px；
宽度：50px；
高度：50px；
边界：无；
}
.1，
.search2{
背景：黑色；
高度：36px；
左：50%；
利润：-18px0-2px；
位置：绝对位置；
过渡时间：200ms；
最高：50%；
宽度：4px；
}
.search1{
-webkit变换：旋转（-45度）；
-ms变换：旋转（-45度）；
变换：旋转（-45度）；
}
.search2{
-webkit变换：旋转（45度）；
-ms变换：旋转（45度）；
变换：旋转（45度）；
}
.展开。搜索2{
背景：#dddddd；
边框：4倍纯黑；
边界半径：100%；
高度：20px；
左：7px；
保证金：0；
顶部：6px；
宽度：20px；
}

我觉得不错。你说一个人的身高或比例不合适是什么意思？你能画出一幅你期望看到的图片或其他东西，或者用另一种方式指出它吗？我刚刚在Firefox中测试过，它成功了，但我在chrome中发送了这个问题。当您单击代码段中的搜索图标时，您应该会看到一个接近的图标，您应该会看到两个高度相等的条相交，但如果它们的高度较大，则会有一个。我通过截屏编辑了这篇文章。在mac上的chrome、safari和firefox中，我看起来不错。我将所有“.search2”元素的高度从2px更改为1.75px，一切看起来都不错。