สไตล์ชีทของตัวแทนผู้ใช้คืออะไร

499

ฉันกำลังทำงานบนหน้าเว็บใน Google Chrome มันแสดงอย่างถูกต้องด้วยสไตล์ดังต่อไปนี้

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;
}

font-sizeจากรูปแบบใหม่เหล่านี้จะรบกวนการออกแบบของฉัน มีวิธีบังคับสไตล์ชีทของฉันหรือไม่และถ้าเป็นไปได้ให้แทนที่สไตล์ชีทเริ่มต้นของ Chrome โดยสมบูรณ์หรือไม่

css google-chrome

— Kapil Sharma
แหล่งที่มา

2

chrome: วิธีปิดการตั้งค่าสไตล์ชีตของตัวแทนผู้ใช้

— givanse

7

โปรดทราบว่าใน Chrome (51) คุณจะได้รับเพียงสองรายการในตารางเมื่อคุณไม่มีการประกาศประเภท doctype มิฉะนั้นคุณจะได้รับเพียงที่สอง

— John

ล้างแคชของ chrome ในเครื่องมือเพิ่มเติม -> ล้างข้อมูลการท่องเว็บ

— doford

2

โพสต์ที่เกี่ยวข้องที่นี่ การทำความเข้าใจว่าสไตล์ชีต user-agent (หรือเบราว์เซอร์) แตกต่างจากสไตล์ชีตผู้ใช้และผู้แต่งจะช่วยให้แนวคิดสิ่งต่าง ๆ ง่ายขึ้น

— RBT

251

เบราว์เซอร์เป้าหมายคืออะไร เบราว์เซอร์ที่ต่างกันตั้งค่ากฎ CSS เริ่มต้นที่แตกต่างกัน ลองรวมถึงการรีเซ็ต CSS เช่นmeyerweb CSS resetหรือnormalize.cssเพื่อลบค่าเริ่มต้นเหล่านั้น Google "CSS reset vs normalize" เพื่อดูความแตกต่าง

— Oliver Millington
แหล่งที่มา

19

ฉันจะรีเซ็ต / ทำให้ CSS เป็นปกติก่อนทุกโครงการด้วยวิธีนี้คุณจะมีฟิลด์ระดับ "เกือบ" ในเบราว์เซอร์ ฉันไม่เคยได้ยินคำว่า "ผลกระทบข้างเคียง" ในแง่ลบเช่นนี้ฉันแน่ใจว่าถ้าคุณมอง Google อย่างรวดเร็วคุณจะพบว่ามันถูกแนะนำ

— Oliver Millington

2

การรีเซ็ตสไตล์อาจทำให้เกิดผลลัพธ์แปลก ๆ ด้วยเขตข้อมูลฟอร์มโดยเฉพาะบริเวณขอบเขตข้อมูลหรือองค์ประกอบหลายส่วนเช่น type = "file"

— รักษา mods ของคุณได้ดี

7

แม้ว่าการรีเซ็ต / การทำให้เป็นมาตรฐานอาจช่วยได้ แต่ก็ไม่ได้ตอบคำถามจริง ๆ ว่าเหตุใดสไตล์ชีทของตัวแทนผู้ใช้จึงเปลี่ยนไป ฉันมีปัญหาเดียวกันกับที่พวกเขามีรูปแบบ UA แตกต่างกันไปสำหรับหน้าที่แสดงผลล่วงหน้าที่ฉันใช้สำหรับ SEO ความคิดเห็นใด ๆ เกี่ยวกับสาเหตุที่เปลี่ยนไป

— Yaron

5

ดูว่า Chrome ตั้งค่าเริ่มต้นไปที่หน้าเว็บเป็นอย่างไร: trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

— Santosh Kumar

10

นี่ไม่ใช่คำตอบ ... การเพิ่ม<!DOCTYPE>ถูกต้องโดย @Sebas

— Amit Shah

140

หาก<!DOCTYPE>ไม่มีเนื้อหา HTML ของคุณคุณอาจพบว่าเบราว์เซอร์ให้การตั้งค่า "สไตล์ตัวแทนผู้ใช้" ผ่านสไตล์ชีทที่กำหนดเองของคุณ การเพิ่ม doctype แก้ไขสิ่งนี้

— Jesper Mygind
แหล่งที่มา

6

นั่นเป็นคำใบ้ที่ยอดเยี่ยม คุณช่วยฉันค้นคว้าบ้าง เวิร์ ธ ตั้งข้อสังเกตว่าในกรณีของฉันฉันมีการประกาศประเภทที่ แต่ฉันมีสคริปต์มาก่อน ดูเหมือนว่า DOCTYPE จะต้องเกิดขึ้นเป็นอย่างแรกในหน้าเพื่อพิจารณา

— Sebas

3

การเพิ่ม <! DOCTYPE> แก้ไขปัญหาการจัดตำแหน่งแนวตั้ง tr / td แปลกมากที่ฉันมี ขอบคุณสำหรับคำตอบนี้

— Ralph Tee

3

นี่คือ nitpicking แต่ <! DOCTYPE html> แก้ไขปัญหาให้ฉัน

— Steve Zelaznik

8

ฉันเปิดใช้งาน <! DOCTYPE html> แล้ว แต่ยังต้องทำให้เป็นมาตรฐาน

— antikbd

1

@ChrisMorgan อ้างถึงจากข้อกำหนดที่คุณเชื่อมโยง: "DOCTYPE จำเป็นสำหรับเหตุผลดั้งเดิมเมื่อละเว้นเบราว์เซอร์มักจะใช้โหมดการแสดงผลที่แตกต่างกันซึ่งไม่เข้ากันกับข้อกำหนดบางประการรวมถึง DOCTYPE ในเอกสารทำให้มั่นใจได้ว่าเบราว์เซอร์สร้าง พยายามอย่างดีที่สุดตามข้อกำหนดที่เกี่ยวข้อง " ในโลกอุดมคติ DOCTYPE ไม่จำเป็น แต่การอ้างสิทธิ์คำตอบก็คือ "ไม่จริง" เป็นตัวหนามาก IMHO โดยเฉพาะการพิจารณาจำนวน upvotes

— Jesper Mygind

104

เกี่ยวกับแนวคิด "user agent style sheet" ปรึกษาส่วนCascadeในข้อมูลจำเพาะ CSS 2.1

สไตล์ชีตของตัวแทนผู้ใช้จะถูกแทนที่ด้วยสิ่งใดก็ตามที่คุณกำหนดไว้ในสไตล์ชีตของคุณเอง พวกเขาเป็นเพียงจุดต่ำสุด: ในกรณีที่ไม่มีสไตล์ชีทใด ๆ ที่จัดทำโดยหน้าหรือโดยผู้ใช้เบราว์เซอร์ยังคงต้องแสดงเนื้อหาอย่างใดและสไตล์ชีทตัวแทนผู้ใช้เพียงแค่อธิบายสิ่งนี้

ดังนั้นหากคุณคิดว่าคุณมีปัญหากับสไตล์ชีตเอเจนต์ผู้ใช้แสดงว่าคุณมีปัญหากับมาร์กอัปหรือสไตล์ชีตของคุณหรือทั้งสองอย่าง (ซึ่งคุณไม่ได้เขียนอะไร)

— Jukka K. Korpela
แหล่งที่มา

@givanse ไม่คุณเห็นเอฟเฟกต์สไตล์ชีตของเอเจนต์ผู้ใช้เมื่อคุณไม่แทนที่พวกเขาและมาร์กอัปตัวอย่างของคุณจะไม่มีข้อยกเว้น มันจะถูกแยกวิเคราะห์เป็นliองค์ประกอบหนึ่งที่มีสองulองค์ประกอบที่มีเนื้อหาข้อความเพียง; มีการจัดสไตล์ตามสไตล์ชีทตัวแทนของผู้ใช้ แต่สไตล์นี้สามารถแทนที่ได้ (ไม่ว่าจะเป็นมาร์กอัปไม่ถูกต้องขึ้นอยู่กับบริบทและ HTML รุ่น แต่นี้ไม่ได้ส่งผลกระทบต่อการจัดแต่งทรง.)

— Jukka เค Korpela

@ givanse ปัญหานั้นไม่เกี่ยวข้องกับคำถาม“ สไตล์ชีตของผู้ใช้คืออะไร” หากคุณคิดว่าปัญหามีความสำคัญให้โพสต์เป็นคำถามใหม่โดยมีรายละเอียดเพียงพอ แต่สัญลักษณ์แสดงหัวข้อย่อยใน jsfiddle ของคุณเป็นสัญลักษณ์แสดงหัวข้อย่อยสำหรับliองค์ประกอบและสไตล์ชีตของคุณไม่ได้แทนที่มัน

— Jukka K. Korpela

47

ทำเครื่องหมายเอกสารเป็น HTML5 ด้วยประเภทเอกสารที่เหมาะสมในบรรทัดแรกแก้ไขปัญหาของฉัน

<!DOCTYPE html>
<html>...

— แดเนียล
แหล่งที่มา

8

คุณกรุณาอธิบายว่ามันควรจะทำงานอย่างไร HTML 5 เกี่ยวข้องกับสไตล์ที่ไม่ได้กำหนดอย่างไร ฉันจะยืนยัน แต่คุณมีซอที่พร้อมจะยืนยันหรือไม่

— Kapil Sharma

28

สไตล์ชีตตัวแทนผู้ใช้คือ“ สไตล์ชีทเริ่มต้น” ที่เบราว์เซอร์จัดทำขึ้น (เช่น Chrome, Firefox, Edge และอื่น ๆ ) เพื่อนำเสนอหน้าเว็บในลักษณะที่ตอบสนอง” ความคาดหวังการนำเสนอทั่วไป” ตัวอย่างเช่นสไตล์ชีตเริ่มต้นจะให้สไตล์พื้นฐานสำหรับสิ่งต่าง ๆ เช่นขนาดตัวอักษรเส้นขอบและระยะห่างระหว่างองค์ประกอบ เป็นเรื่องปกติที่จะใช้สไตล์ชีตรีเซ็ตเพื่อจัดการกับความไม่สอดคล้องกันระหว่างเบราว์เซอร์

จากสเปค ...

สไตล์ชีตเริ่มต้นของตัวแทนผู้ใช้ควรนำเสนอองค์ประกอบของภาษาเอกสารในรูปแบบที่ตอบสนองความคาดหวังของงานนำเสนอทั่วไปสำหรับภาษาเอกสาร ~ น้ำตก

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับตัวแทนผู้ใช้โดยทั่วไปเห็นตัวแทนของผู้ใช้

— Kenneth Stoddard
แหล่งที่มา

15

ตอบคำถามในชื่ออะไรคือสไตล์ชีทของตัวแทนผู้ใช้ชุดสไตล์เริ่มต้นในเบราว์เซอร์: นี่คือบางส่วนของมัน (และสิ่งที่เกี่ยวข้องที่สุดในเว็บของวันนี้):

Gecko (Firefox): https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css
Chromium (Chrome): https://chromium.googlesource.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

ความคิดเห็นส่วนตัว: อย่าต่อสู้กับพวกเขา พวกเขามีค่าเริ่มต้นที่ดีตัวอย่างเช่นในกรณี rtl / bidi และมีความสอดคล้องในปัจจุบัน รีเซ็ตสิ่งที่คุณเห็นว่าไม่เกี่ยวข้องกับคุณไม่ใช่ทั้งหมดในครั้งเดียว

— Ebrahim Byagowi
แหล่งที่มา

12

กำหนดค่าที่คุณไม่ต้องการให้ใช้จากรูปแบบตัวแทนผู้ใช้ของ Chrome ในเนื้อหา CSS ของคุณเอง

— BenM
แหล่งที่มา

4

เบราว์เซอร์บางตัวใช้วิธีการอ่านไฟล์. css ดังนั้นวิธีที่ถูกต้องในการเอาชนะสิ่งนี้: หากคุณพิมพ์บรรทัดคำสั่งโดยตรงในซอร์สโค้ด. html นี่จะเป็นการตีไฟล์. css ด้วยวิธีนี้คุณบอกเบราว์เซอร์โดยตรงว่าจะทำอย่างไรและเบราว์เซอร์อยู่ในตำแหน่งที่จะไม่อ่าน คำสั่งจากไฟล์. css โปรดจำไว้ว่าคำสั่งเขียนในไฟล์. html นั้นแรงกว่าคำสั่งใน. css

— rollin_jeksun
แหล่งที่มา

1

ฉันมีปัญหาเช่นเดียวกับ <div> อันใดอันหนึ่งของฉันที่กำหนดโดยเบราว์เซอร์ มันค่อนข้างน่ารำคาญ แต่จากนั้นฉันก็พบว่าคนส่วนใหญ่พูดว่ามันเป็นข้อผิดพลาดของมาร์กอัป

ฉันกลับไปและตรวจสอบส่วน <head> ของฉันและลิงก์ CSS ของฉันเป็นดังนี้:

<link rel="stylesheet" href="ex.css">

ฉันรวมอยู่typeในนั้นและทำให้เหมือนด้านล่าง:

<link rel="stylesheet" type="text/css" href="ex.css">

ปัญหาของฉันได้รับการแก้ไข

— Appy Sharma
แหล่งที่มา

0

แต่ละเบราว์เซอร์จะมีสไตล์ชีทเริ่มต้นซึ่งเรียกว่าสไตล์เอเจนต์ผู้ใช้ในกรณีที่ไฟล์ HTML ไม่ได้ระบุไว้ ลักษณะที่คุณระบุจะแทนที่ค่าเริ่มต้น

เนื่องจากคุณไม่ได้ระบุค่าสำหรับกล่ององค์ประกอบของตารางจึงใช้สไตล์เริ่มต้น

— firstpostcommenter
แหล่งที่มา

0

ฉันแค่อยากจะขยายการตอบสนองจาก @BenM ตามสิ่งที่ฉันอ่านที่นี่จาก Ire Aderinokun เนื่องจากสไตล์ชีทของผู้ใช้ - เอเจนต์จัดเตรียมสไตล์เริ่มต้นที่เป็นประโยชน์ลองคิดดูสองครั้งก่อนที่จะเอาชนะมัน

ฉันมีข้อผิดพลาดโง่ที่องค์ประกอบปุ่มไม่ถูกต้องใน Chrome ฉันมีสไตล์บางส่วนเพราะฉันไม่ต้องการให้มันดูเหมือนปุ่มแบบดั้งเดิม อย่างไรก็ตามฉันทิ้งองค์ประกอบสไตล์เช่นเส้นขอบสีเส้นขอบ ฯลฯ ดังนั้น Chrome จึงก้าวเข้ามาจัดหาชิ้นส่วนที่คิดว่าหายไป

ปัญหาหายไปเมื่อฉันเพิ่มสไตล์เช่นborder: noneฯลฯ

ดังนั้นหากใครมีปัญหานี้ให้ตรวจสอบให้แน่ใจว่าคุณได้แทนที่รูปแบบตัวแทนผู้ใช้เริ่มต้นที่ใช้งานได้ทั้งหมดสำหรับองค์ประกอบถ้าคุณสังเกตเห็นว่ามันดูสกปรกโดยเฉพาะถ้าคุณไม่ต้องการรีเซ็ตรูปแบบตัวแทนผู้ใช้ทั้งหมด มันใช้งานได้สำหรับฉัน

— เบรนต์มิลเลอร์
แหล่งที่มา

นี่ไม่ใช่ความคิดเห็นแทนที่จะเป็นคำตอบใช่หรือไม่

— Peter Mortensen

@ PeterMortensen ใช่ แต่ฉันไม่สามารถแสดงความคิดเห็น - ชื่อเสียงไม่เพียงพอ

— Brent Miller

-1

ฉันมีทางออก ตรวจสอบสิ่งนี้:

ความผิดพลาด

<link href="assets/css/bootstrap.min.css" rel="text/css" type="stylesheet">

แก้ไข

<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">

— Vinkal Chandel
แหล่งที่มา

2

โปรดแก้ไขเพื่ออธิบายวิธีการทำงานและสาเหตุที่ช่วยได้

— Yunnosch

-6

วางรหัสต่อไปนี้ในไฟล์ CSS ของคุณ:

table {
    font-size: inherit;
}

— Srikanth
แหล่งที่มา

2

นี่ไม่ได้เพิ่มอะไรใหม่ในโพสต์นี้ มีคำตอบที่ยอมรับแล้วรวมทั้งคำตอบอื่น ๆ อีก 5 ข้อดังนั้นโปรดอย่าโพสต์คำตอบที่ล่าช้า

— Kaspar Lee