MacOS X下Chrome瀏覽器中Input標簽默認樣式問題

在MacOS X下的Chrome瀏覽器中,給提交按鈕直接設置高度不起作用

代碼如下:

在Chrome瀏覽器中顯示如下圖;

在Firefox瀏覽器中顯示如下圖;

針對谷歌的這種情況,用一般的清除樣式代碼如去除內外邊距并沒有生效,

Chrome和safari會為提交按鈕添加一個user agent提供的樣式,

首先查找到的處理方式是聲明文件類型,嘗試過修改為HTML4.01和XHTML,都無法解決;

后來發現,需要重新設置提交按鈕的背景或者邊框屬性去覆蓋默認樣式才能使高度生效.


類似的問題也發生在輸入框上,

在chrome上顯示輸入框時,若不為其添加邊框或者背景屬性,瀏覽器會自動將一個名為border-style的屬性添加到輸入框上,其值為inset,導致上邊框看上去會較深,同樣需要手動覆蓋對應的屬性才能解決。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容