Windows上Chrome中的日期輸入寬度

Question

這個小提琴顯示我的問題：http://jsfiddle.net/jmTqk/2/。藍色塊遮擋旋轉按鈕和日期選擇器下拉鍊接。但我認爲你需要在Windows Chrome上才能看到它。這裏是沒有的藍色塊http://jsfiddle.net/jmTqk/1/

此HTML

<input id='date1' type="date" /> 
<div id='abcd'>blue block</div> 

一個版本，這個CSS

#date1 { 
    width:6em; 
    border: 1px solid red; 
    } 
    #abcd { 
    background-color:blue; 
    height:150px; 
    width:150px; 
    display:inline-block; 
    } 

如果更改輸入的寬度11em它適合。

在Ubuntu Chrome上，css將日曆下拉按鈕限制在日期輸入字段的內部。在Windows（XP，7）上沒有。有沒有一種方法可以讓旋轉按鈕和下拉菜單尊重Windows上的日期輸入範圍，並放入紅框中？

Answer 1

這是Chrome錯誤，你可以讀到這裏：

https://code.google.com/p/chromium/issues/detail?id=172029

Answer 2

我固定通過禁用瀏覽器日期選取器控件。這適合你嗎？

input[type=date]::-webkit-inner-spin-button, 
input[type=date]::-webkit-outer-spin-button, 
input[type="date"]::-webkit-calendar-picker-indicator { 
    display:none; 
    -webkit-appearance: none; 
    margin: 0; 
} 

jsFiddle demo