我正在用谷歌瀏覽器做一個網頁。它可以正確顯示以下樣式。
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
需要注意的是,我沒有定義這些樣式。在Chrome開發者工具中,它用用戶代理樣式表代替CSS文件名。
現在,如果我提交一個表單,出現了一些驗證錯誤,我會得到下面的樣式表:
table {
white-space: normal;
line-height: normal;
font-weight: normal;
font-size: medium;
font-variant: normal;
font-style: normal;
color: -webkit-text;
text-align: -webkit-auto;
}
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
這些新樣式的字體大小干擾了我的設計。有沒有辦法強制我的樣式表,如果可能的話,完全覆蓋Chrome的默認樣式表?
目標瀏覽器有哪些?不同的瀏覽器設置不同的默認CSS規則。嘗試包含CSS重置,如meyerweb CSS重置或normalize.css,以刪除這些默認值。谷歌“CSS重置與正常化”來看看區別。
如果& lt!DOCTYPE & gt您可能會遇到這樣的情況,瀏覽器優先選擇“用戶代理樣式表”而不是自定義樣式表。添加doctype可以解決這個問題。
關于“用戶代理樣式表”的概念,請參考CSS 2.1規范中的Cascade一節。
用戶代理樣式表會被您在自己的樣式表中設置的任何內容覆蓋。它們只是底層:在頁面或用戶沒有提供任何樣式的情況下,瀏覽器仍然必須以某種方式呈現內容,用戶代理樣式表只是描述了這一點。
因此,如果你認為你有一個用戶代理樣式表的問題,那么你真的有你的標記的問題,或者你的樣式表的問題,或者兩者都有問題(對此你什么也沒寫)。
通過在第一行使用正確的doctype將文檔標記為HTML5,解決了我的問題。
<!DOCTYPE html>
<html>...
用戶代理樣式表是由瀏覽器(例如Chrome、Firefox、Edge等)提供的“默認樣式表”。)以便以滿足“一般表示期望”的方式來表示頁面例如,一個默認的樣式表將為字體大小、邊框和元素間距等提供基本樣式。
由于每個瀏覽器應用的基本樣式之間的差異,使用CSS重置來規范化或消除瀏覽器之間的不一致也是很常見的。
從規格來看...
用戶代理的默認樣式表應該以滿足文檔語言一般表示期望的方式來表示文檔語言的元素。~瀑布。
有關用戶代理的一般信息,請參見用戶代理。
回答標題中的問題,什么是用戶代理樣式表,瀏覽器中的一組默認樣式:下面是其中的一些:
chromium(Chrome):https://chromium . Google source . com/chromium/src/third _ party/+/master/blink/renderer/core/html/resources/html . CSS
WebKit(Safari):https://TRAC . WebKit . org/browser/trunk/Source/WebCore/CSS/html . CSS
gecko(Firefox):https://search fox . org/Mozilla-central/source/layout/style/RES/html . CSS
serenity:https://github . com/serenity OS/serenity/blob/master/Userland/Libraries/LibWeb/CSS/default . CSS # L4
Mozilla Servo:https://github . com/Servo/Servo/blob/master/resources/user-agent . CSS # L9
個人觀點:不要和他們斗。它們有很好的缺省值,例如,在RTL/比迪煙案例中,并且現在是一致的。重置你看到的與你無關的東西,而不是一次全部重置。
在你自己的CSS內容中定義你不想從Chrome的用戶代理風格中使用的值。
有些瀏覽器使用自己的閱讀方式。css文件。 所以正確的解決方法是: 如果您直接在。html源代碼,這個比。css文件,通過這種方式,你直接告訴瀏覽器做什么,瀏覽器就不會從。css文件。 請記住,命令寫在。html文件比. css中的命令更強大。
我和我的一個& ltdiv >的邊距是由瀏覽器設置的。這很煩人,但后來我發現,正如大多數人所說,這是一個標記錯誤。
我回去檢查了我的& lthead >部分,我的CSS鏈接如下所示:
& ltlink rel = " style sheet " href = " ex . CSS " >
我在其中添加了文字,如下所示:
& ltlink rel = " style sheet " type = " text/CSS " href = " ex . CSS " >
我的問題解決了。
我只是想根據我從Ire Aderinokun那里讀到的內容來擴展一下@BenM的回復。因為用戶代理樣式表提供了有用的默認樣式,所以在覆蓋它之前要三思。
我有一個愚蠢的錯誤,一個按鈕元素在Chrome中看起來不太對。我對它進行了部分設計,因為我不想讓它看起來像一個傳統的按鈕。然而,我忽略了像邊框、邊框顏色等樣式元素。因此,Chrome開始提供它認為我缺失的部分。
當我添加了border: none等樣式后,這個問題就消失了。
因此,如果其他人也有這個問題,如果您注意到某個元素看起來不可靠,請確保您顯式地覆蓋了該元素的所有適用的默認用戶代理樣式,尤其是如果您不想完全重置用戶代理樣式的話。對我很有效。
每個瀏覽器都提供一個默認樣式表,稱為用戶代理樣式表,以防HTML文件沒有指定。您指定的樣式會覆蓋默認值。
因為沒有為表格元素的框指定值,所以應用了默認樣式。
我遇到了同樣的問題,這是因為我使用的是非語義html
<!--incorrect-->
<ul class="my-custom-font">
<button>
<a>user agent styles applied instead of my-custom-font</a>
<button>
</ul>
<!--correct-->
<ul class="my-custom-font">
<li>
<a>now inherits from from my-custom-font</a>
</li>
</ul>
一旦HTML被更新,樣式被正確地應用
我發現一個例子,用戶代理css覆蓋了我的內置或定義的CSS,結果是我使用了& quot本地覆蓋& quot偶然出現在Chrome頁面上。
因此,當然只有用戶代理css顯示出來,因為覆蓋不允許我進行更改。
查一下這個https://www . LinkedIn . com/posts/smruti-Sagar-pattan aik-a3a 000195 _ html-CSS-chrome-activity-7027888128115847168-USil?共享& amputm _ medium =成員_桌面
我有一個解決辦法。檢查這個:
錯誤
<link href="assets/css/bootstrap.min.css" rel="text/css" type="stylesheet">
正確的
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
將以下代碼放入CSS文件中:
table {
font-size: inherit;
}