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

Question

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

所以我有一个 div 标签和 input 以及幻灯片中的 div 子元素。其中一个 div 是静态的 32px x 32px，我正在使用 calc(100% - 32px) 计算它的宽度，但是在缩放时一些像素没有填充输入。

这是问题的照片:http://imgur.com/TkRFLde

当缩放不能被 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。

您可以删除 .search-icon 上的 float:right，它将正常工作。

你可以在这里看到:

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 如果您只是为您的选择器添加更多的特异性。