ตัวเลือก IE8 CSS เลือก แต่ไม่ได้ใช้สไตล์

http://www.dmhermitage.org/wtfborders.pngสิ่งนี้ทำให้ฉันต้องการ ที่จะฆ่าตัวตาย

ฉันมี CSS ที่เรียบง่ายมากในการจัดรูปแบบวัตถุอินพุตของฉัน:

    input, button
    {
        border: 1px solid #c66600;
        background-color: white;
        color: #7d212f;
        font-family: "Eras Light ITC", Tahoma, sans;
    }

แต่ฉันไม่ชอบเส้นขอบที่น่าเกลียดที่วางไว้รอบปุ่มตัวเลือก ดังนั้นฉันจึงใช้ตัวเลือกเพื่อกำจัดเส้นขอบ:

input[type=radio] { border: none; }

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

ฉันได้ลองใช้ความหมายหลายอย่าง เช่น การตั้งค่าความกว้างของเส้นขอบเป็น 0px หรือสีบางอย่างที่แปลก เช่น สีเขียวมะนาว แต่ยังคงเป็นสีที่ได้รับมอบหมายตั้งแต่แรกที่ได้รับจากสไตล์แรก

และสุดท้าย ฉันได้ลองใช้การจัดสไตล์วัตถุ 'ข้อความ' เท่านั้น ซึ่งในกรณีนี้จะไม่มีการปรับใช้สไตล์กับสิ่งใดเลย เบราว์เซอร์อ้างว่าตอบสนองการเลือก CSS อีกครั้ง แต่ไม่เห็นเกิดขึ้น

ความคิด?

อย่างไรก็ตาม นี่คือการติดตั้ง DotNetNuke ที่มีโค้ดที่สร้างขึ้นซึ่งฉันไม่สามารถกำหนดรูปแบบของปุ่มตัวเลือกได้อย่างชัดเจน

ขอบคุณแดน


css radio-button internet-explorer css-selectors internet-explorer-8
person Dan    schedule 16.04.2010    source แหล่งที่มา
comment
คุณมีตัวอย่างสดให้เราดูหรือไม่?   -  person Kyle    schedule 16.04.2010
comment
ตัวอย่างสด (อยู่ระหว่างการปรับปรุง) อยู่ที่นี่: dmhermitage.org/portal ตรวจสอบปุ่มตัวเลือกข้างช่องค้นหาเพื่อดูว่าฉันหมายถึงอะไร   -  person Dan    schedule 16.04.2010
comment
ฉันคิดเสมอว่าปุ่มตัวเลือกเหล่านี้เป็นมาตรฐานของเบราว์เซอร์ เช่น แท็กชื่อ น่าสนใจที่จะทราบว่าพวกเขาสามารถเปลี่ยนแปลงได้หรือไม่ คุณมีชุดนี้ด้วย: -webkit-appearance: radio บางทีนั่นอาจไม่ช่วยอะไรใช่ไหม   -  person Kyle    schedule 16.04.2010
comment
ดูเหมือนว่าเป็นข้อบกพร่องอย่างแน่นอน ฉันได้รับสิ่งเดียวกันใน IE8 คุณลองใช้คลาสแทน input[type=radio] ได้ไหม   -  person Pekka    schedule 16.04.2010

คำตอบ (6)


arrow_upward
2
arrow_downward

ดูเหมือนว่า IE8 จะเรนเดอร์ในโหมดแปลกๆ แทนที่จะเป็นโหมดมาตรฐาน ซึ่งจะทำให้ทุกอย่างใน IE ยุ่งเหยิงอยู่เสมอ หากต้องการเปลี่ยนเป็นโหมดมาตรฐาน วิธีที่ง่ายที่สุดคือการแทนที่ประเภทเอกสารในบรรทัดแรกของเอกสารด้วย:

<!DOCTYPE HTML>

คุณอาจต้องการดู HTML บางส่วนที่กำลังส่งออกอยู่ คุณมีช่วงที่มี ID dnn_dnnMENU_ctldnnMENU ซึ่งมีแอตทริบิวต์ที่ถูกสร้างขึ้นมากมาย เช่น BackColor, SysImgPath, MenuItemHeightและอื่นๆ สิ่งเหล่านี้จะไม่มีผลกระทบในเบราว์เซอร์ส่วนใหญ่ (บางที IE อาจตีความมันเป็นพิเศษ ฉันไม่รู้)

person DisgruntledGoat    schedule 16.04.2010
comment
ไม่เพียงแต่เปลี่ยนเป็นมาตรฐานเท่านั้น แต่ยังเปลี่ยนเป็น html 5 ด้วย - person Adam Kiss; 16.04.2010
comment
@Adam: ไม่ได้อยู่ใน IE มันไม่ได้ และวิธีที่เบราว์เซอร์อื่นๆ จัดการกับมาตรฐาน HTML 5 ก็ไม่แตกต่างกันมากนัก นอกเหนือจากการรองรับองค์ประกอบเพิ่มเติมอีกสองสามรายการ - person DisgruntledGoat; 17.04.2010

arrow_upward
1
arrow_downward

ปัญหาคือ...

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

ทางออก[แก้ไข]

เนื่องจาก: http://dorward.me.uk/www/ie8/

ตั้งค่าประเภทเอกสาร html 4 ของคุณเป็น:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
person Adam Kiss    schedule 16.04.2010
comment
อืม...นั่นเป็นการเพิ่มความคิดเห็น HTML ไม่ใช่ประเภทเอกสาร - person DisgruntledGoat; 16.04.2010
comment
ขอบคุณมาก วิธีนี้แก้ไขปัญหาในกล่องท้องถิ่นของฉันแล้ว (ยังไม่ได้อัปโหลด) - person Dan; 16.04.2010

arrow_upward
0
arrow_downward

ในกรณีที่คุณได้ลองกับ:

input[type='radio'] { border: none; }

สังเกตการเพิ่มเครื่องหมายอัญประกาศเดี่ยว (หรืออะไรก็ตามที่คุณเรียกว่า ' ในภาษาตลกของคุณ :P)

ฉันดูที่ไซต์แล้ว CSS ของคุณถูกต้องแล้ว และไม่มีอะไรที่จะช่วยคุณได้ ขอให้โชคดี!

person Kaze no Koe    schedule 16.04.2010
comment
พยายามใช้เครื่องหมายอะพอสทรอฟี่ด้วย สิ่งเดียวกัน ตัวอย่างสด (อยู่ระหว่างการปรับปรุง) อยู่ที่นี่: dmhermitage.org/portal ตรวจสอบปุ่มตัวเลือกข้างช่องค้นหาเพื่อดู สิ่งที่ผมหมายถึง. - person Dan; 16.04.2010

arrow_upward
0
arrow_downward

คุณสามารถลบเส้นขอบได้โดยตั้งค่าแอตทริบิวต์สไตล์อินไลน์ในแถบเครื่องมือของนักพัฒนาซอฟต์แวร์เป็น border: none;... ดังนั้นด้วยเหตุผลบางประการ สไตล์จึงไม่นำไปใช้กับปุ่มตัวเลือก แม้ว่าสไตล์จะถูกติดตามอย่างถูกต้องก็ตาม ดูเหมือนว่ามีข้อผิดพลาดบางอย่าง .. คุณได้ลองเพิ่มความจำเพาะของกฎแล้วหรือยัง (ซึ่งควรจะสูงกว่าอินพุตอยู่แล้ว แต่เพียงเพื่อลองใช้)?

ตัวอย่างเช่น:

#page input[type=radio] {
   border: none;
}
person PatrikAkerstrand    schedule 16.04.2010

arrow_upward
0
arrow_downward

มันเป็นไปไม่ได้กับ CSS อีกต่อไป (เท่าที่ฉันรู้) แต่การใช้ Javascript ที่นี่มันจะเป็นไปได้สำหรับคุณ จัดรูปแบบช่องทำเครื่องหมายและปุ่มตัวเลือกด้วย CSS และ Javascript

person Kyle    schedule 16.04.2010

arrow_upward
0
arrow_downward

น่ารังเกียจ. ลองระบุสีขอบเป็นสีขาวดูมั้ย?

person graphicdivine    schedule 16.04.2010