輸入上邊框消失在Windows上的Chrome

code 輸入上邊框消失在Windows上的Chrome

<div class="center"> 
    <div class="parent"> 
    <label>姓名</label> 
    <input type="text"> 
    </div> 
</div> 


.center { 
    transform: translate(-50%, -50%); 
    position: absolute; 
    top: 50%; 
    left: 50%; 
} 

.parent { 
    padding: 8px 0; 
} 
label { 
    margin-left: 20px; 
} 
input { 
    width: 100px; 
    height: 41px; 
}

我想知道爲什麼輸入disappears.I的上邊框將不勝感激，如果有人回答我。

操作系統：win10

瀏覽器：鉻51.0.2704.84m

感謝。

來源

2017-02-10 Hsu Lee

由於transform：translate（-50％，-50％）;

您可以通過修改CSS來去除變換

.center { 
    position: relative; 
    width: 100%; 
} 
.parent { 
    padding: 8px 0; 
    margin: 15% auto; 
    width: 100px; 
} 
label { 
    margin-left: 20px; 
} 
input { 
    width: 100px; 
    height: 41px; 
}

來源

2017-02-10 04:18:12

我想知道爲什麼''transform''會影響邊界。 –

這可能是Chrome的一個問題，但如果您只想與現有的CSS邊框，您只需在輸入標記中添加一行邊框代碼即可： border：1px solid #aaa; –

這是由你的元素在子像素渲染由平移變換的圖形毛刺（即：10.5px或類似）。

有一些已知的解決方案來解決這個問題，雖然我還沒有多少運氣與他們：

1）使用transform: transform: translate(-50%, -50%) perspective(1px);
2）在父元素中，添加。

.parent { 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
}

來源：http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

如果你不需要對舊版瀏覽器的支持，你可以使用Flexbox的： https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

來源

2017-06-23 18:02:09

輸入上邊框消失在Windows上的Chrome

回答

相關問題