Question

这是我在这里的第一篇文章。我不知道如何解释我的问题，因为我真的不知道导致我的CSS代码破坏的原因。在照片中向您展示会更容易。

所以我有一个div标签和输入和div子元素inslide。其中一个div是静态32px x 32px，我用calc（100％ - 32px）计算它的宽度，但是当缩放时，一些像素没有被输入填充。

当缩放不能被100整除时会发生这种情况。例如，它会在110％，150％和175％处中断。但是当缩放是100％，200％，300％......时，它是正确的。

继承我的代码：

<div class="search">
    <input type="text" value="Search" class="search-text" />
    <div class="search-icon" ></div>
</div>

CSS：

.search {
    height: 32px;
    width: 250px;
}
.search-text{
    float:left;
    width: calc(100% - 55px) !important;
    display: inline-block !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    margin: 0;width: 196px;
}
.search-icon{
    display: inline-block !important;
    background-color: #ACB6BE;
    height: 30px;
    width: 31px;
    float:right;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    cursor: pointer;
    border: 1px solid #acb6be;
}
input[type=text] {
   border-radius: 5px;
   border: 1px solid #acb6be;
   min-width: 180px;
   color: #acb6be;
   padding: 0 10px;
   height: 30px;
   background-color: #fff;
   font-weight: 600;
}

或者jsfiddle：http://jsfiddle.net/39VDR/1/

Answer 1

出现问题是因为缩放时，您的值不再是整数。这意味着将进行舍入，外容器（.search）将比您预期的1px大。

您可以移除float:right上的.search-icon，这样就可以了。

你可以在这里看到：

http://jsfiddle.net/39VDR/4/

.search-icon{
    display: inline-block;
    background-color: #ACB6BE;
    height: 30px;
    width: 31px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    cursor: pointer;
    border: 1px solid #acb6be;
    font-size:12px;
    vertical-align: top;
}

如上所述，如果您只是为选择器添加更多特异性，则可以删除!important。

缩放时发生的CSS奇怪的事情

1 个答案: