คำถามติดแท็ก css

โดยทั่วไปฉันมี css ภายนอกสองรายการในเพจของฉัน ข้อแรกMain.cssมีกฎสไตล์ทั้งหมด แต่ฉันไม่สามารถเข้าถึงได้ดังนั้นฉันจึงไม่สามารถแก้ไขได้ ฉันสามารถเข้าถึงไฟล์ที่สองได้Template.cssดังนั้นฉันจึงต้องลบล้างMain.cssค่าของในtemplate.css. นี่เป็นเรื่องง่ายที่ฉันต้องเปลี่ยนค่า แต่ฉันจะลบคุณสมบัติทั้งหมดได้อย่างไร เช่นเดียวกับที่คลาส.c1มีheight: 40px;ฉันจะกำจัดคุณสมบัติความสูงนี้ได้อย่างไร

109 css 

ฉันต้องการเพิ่มคุณสมบัติการออกแบบที่ตอบสนองให้กับเว็บแอปพลิเคชันของฉันโดยใช้ Twitter Bootstrap ฉันแค่ต้องการพฤติกรรมที่ตอบสนองฉันไม่สนใจตัวอักษรส่วนประกอบหรือสิ่งอื่นใดที่รวมอยู่ใน Bootstrap ฉันได้รับBootstrap เวอร์ชันที่กำหนดเองเพียงแค่เลือกระบบกริด อย่างไรก็ตามเมื่อฉันเพิ่ม CSS ที่สร้างขึ้นในแอปพลิเคชันของฉันสไตล์ทั้งหมดของฉันจะยุ่งเหยิง (ส่วนหัวลิงก์และอื่น ๆ ) เหตุใดจึงเกิดขึ้น ฉันจะรับ Bootstrap CSS ด้วยระบบกริดได้อย่างไร ฉันต้องการหลีกเลี่ยงการแก้ไขไฟล์ Bootstrap ด้วยตนเอง

109 html  css  twitter-bootstrap  responsive-design 

ฉันเพิ่งพบปัญหาแปลก ๆ ที่ปรากฏใน Safari 10 เท่านั้นฉันมีการ์ดเล่นภาพ svg ซึ่งบางครั้งก็หมุนโดยใช้transform:rotate(xdeg). การ์ดที่ฉันใช้มีรูปแบบบล็อกสีแดง เมื่อมันไม่หมุนหรือหมุนเป็นมุมฉากเช่น 90, 180, 270 ก็จะดูปกติ แต่มุมอื่น ๆ ที่ไม่ใช่พื้นหลังจะเปลี่ยนเป็นสีน้ำเงิน! ฉันเพิ่งได้รับรายงานเกี่ยวกับเรื่องนี้จากผู้ใช้คนหนึ่งของฉันและไม่เคยเห็นอะไรแปลก ๆ เบราว์เซอร์อื่น ๆ ทั้งหมดทำงานได้ตามปกติ Safari 9 ทำงานได้ตามปกติ ฉันเดาว่านี่เป็นเพียงข้อผิดพลาดแปลก ๆ ใน Safari 10 แต่มีความคิดเกี่ยวกับวิธีการแก้ไขหรือไม่ ฉันได้สร้าง repro ขั้นต่ำที่: https://jsfiddle.net/2zv4garu/1/

109 html  css  svg  safari 

ใน Webkit บน iPhone / iPad / iPod การระบุสไตล์สำหรับ: คลาสหลอกที่ใช้งานอยู่สำหรับ<a>แท็กจะไม่ทริกเกอร์เมื่อคุณแตะที่องค์ประกอบ ฉันจะทำให้สิ่งนี้ทริกเกอร์ได้อย่างไร รหัสตัวอย่าง: <style> a:active { background-color: red; } </style> <!-- snip --> <a href="#">Click me</a>

109 iphone  css  webkit  mobile-safari  pseudo-class 

ฉันมีตัวจัดการเหตุการณ์ต่อไปนี้สำหรับองค์ประกอบ html ของฉัน jQuery("#seek-bar").click(function(e){ var x = e.pageX - e.target.offsetLeft; alert(x); }); ฉันต้องการค้นหาตำแหน่งของเมาส์บนแถบค้นหา # เมื่อคลิก ฉันคิดว่ารหัสข้างต้นควรใช้งานได้ แต่ให้ผลลัพธ์ที่ไม่ถูกต้อง

109 javascript  jquery  html  css  jquery-ui 

ในแบบฟอร์มฉันมีช่องเลือกหนึ่งช่องและช่องป้อนข้อมูลสองช่อง องค์ประกอบเหล่านี้อยู่ในแนวตั้ง น่าเสียดายที่ฉันไม่สามารถรับความกว้างขององค์ประกอบเหล่านี้ได้เท่ากัน นี่คือรหัสของฉัน: <select name="name1" style="width:198px"> <option>value1</option> <option>value2</option> </select><br/> <input type="text" name="id1" style="width:193px"><br/> <input type="text" name="id2" style="width:193px"> ตัวอย่างข้างต้นความกว้างที่ดีที่สุดสำหรับองค์ประกอบที่เลือกคือ 198 หรือ 199 พิกเซล (แน่นอนว่าฉันลอง 193px แต่ความแตกต่างนั้นสำคัญมาก) ฉันคิดว่ามันขึ้นอยู่กับความละเอียดบนคอมพิวเตอร์และเบราว์เซอร์ต่างๆเนื่องจากองค์ประกอบเหล่านี้มีความกว้างไม่เท่ากัน (บางครั้งฉันคิดว่าความแตกต่างอยู่ที่ประมาณ 1 หรือ 2 พิกเซล) ฉันพยายามตั้งค่าองค์ประกอบเหล่านี้ในแถว div หรือตารางแล้ว แต่ก็ไม่ได้ผล ถาม: ฉันจะรับความกว้างขององค์ประกอบเหล่านี้เท่ากันได้อย่างไร

109 html  css  html-select  border-box 

ตามเอกสารของ twitter bootstrap ฉันควรจะสามารถ "ตัดสตริงข้อความใน<p>แท็กเพื่อให้นำหน้าและสีที่เหมาะสม" เมื่อฉันทำสิ่งนี้ไม่ว่าจะอยู่ในระดับใดก็ตามnavbarจะไม่สืบทอดnavbarคลาสใด ๆ การรวมสตริงใน<a>แท็กจะแสดงผล แต่ไม่ควรเป็นจุดยึด "Logged in as ... "สตริงฉันพยายามที่จะทำให้เป็น

109 html  css  twitter-bootstrap 

ฉันต้องการรังspanและaแท็ก ฉันควร ใส่<span>ข้างใน<a> ใส่<a>ข้างใน<span> มันไม่สำคัญ?

109 html  css  semantic-markup 

สำหรับโครงการของฉัน (ดูโครงการ BigPictu.reหรือbigpicture.js GitHub ) ฉันต้องจัดการกับ<div>คอนเทนเนอร์ที่ใหญ่มากและใหญ่มาก ฉันรู้ว่ามีความเสี่ยงที่จะมีประสิทธิภาพต่ำด้วยวิธีง่ายๆที่ฉันใช้ แต่ฉันไม่ได้คาดหวังว่ามันจะมีอยู่ใน ... Chrome เท่านั้น! หากคุณทดสอบเพจเล็ก ๆ นี้ (ดูโค้ดด้านล่าง) การแพน (คลิก + ลาก) จะเป็น: ปกติ / ราบรื่นบน Firefox ปกติ / ราบรื่นแม้ใน Internet Explorer ช้ามาก (เกือบจะขัดข้อง) บน Chrome! แน่นอนฉันสามารถเพิ่มโค้ด (ในโปรเจ็กต์ของฉัน) เพื่อทำเช่นนั้นเมื่อคุณซูมเข้ามากข้อความที่มีขนาดฟอนต์ใหญ่มากจะถูกซ่อนไว้ แต่เหตุใด Firefox และ Internet Explorer จึงจัดการอย่างถูกต้องและไม่ใช่ Chrome มีวิธีใน JavaScript, HTML หรือ CSS ที่จะบอกเบราว์เซอร์ไม่ให้พยายามแสดงผลทั้งหน้า (ซึ่งกว้าง …

109 javascript  html  css  google-chrome 

ฉันมีรหัสต่อไปนี้: <div class="table"> <div class="row"> <div class="cell">Cell</div> <div class="cell">Cell</div> </div> <div class="row"> <div class="cell colspan2">Cell</div> </div> </div> <style> .table { display: table; } .row { display: table-row; } .cell { display: table-cell; } .colspan2 { /* What to do here? */ } </style> ค่อนข้างตรงไปตรงมา ฉันจะเพิ่ม colspan (หรือเทียบเท่ากับ colspan) สำหรับองค์ประกอบได้display: table-cellอย่างไร?

109 html  css 

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

109 javascript  jquery  css  webbrowser-control 

ฉันใช้ window.print () สำหรับการพิมพ์หน้า แต่ฉันได้รับส่วนหัวและส่วนท้ายมีชื่อหน้าเส้นทางไฟล์หมายเลขหน้าและวันที่ จะลบออกได้อย่างไร? ฉันลองพิมพ์สไตล์ชีตด้วย #header, #nav, .noprint { display: none; } กรุณาช่วย. ขอบคุณ.

109 css  printing 

ฉันเพิ่งเริ่มใช้ Bootstrap จาก Twitter และฉันสงสัยว่า 'แนวทางปฏิบัติที่ดีที่สุด' สำหรับการปรับแต่งคืออะไร ฉันต้องการพัฒนาระบบที่จะใช้ประโยชน์จากพลังทั้งหมดของเทมเพลต css (Bootstrap หรืออื่น ๆ ) แก้ไขได้อย่างสมบูรณ์ (และง่าย) มีความยั่งยืน (กล่าวคือ - เมื่อ Bootstrap เวอร์ชันถัดไปออกจาก Twitter ฉันจะไม่ '' ต้องเริ่มต้นใหม่ ตัวอย่างเช่นฉันต้องการเพิ่มภาพพื้นหลังในการนำทางด้านบน ดูเหมือนว่าจะมี 3 วิธีในการดำเนินการนี้: ปรับเปลี่ยนคลาส. topbar ใน bootstrap.css ฉันไม่ชอบสิ่งนี้เป็นพิเศษเพราะฉันจะมีรายการ. topbar จำนวนมากและฉันไม่จำเป็นต้องแก้ไขด้วยวิธีเดียวกันทั้งหมด สร้างคลาสใหม่ด้วยภาพพื้นหลังของฉันและใช้ทั้งสองสไตล์ (ใหม่และ bootstrap กับองค์ประกอบของฉัน) สิ่งนี้อาจสร้างความขัดแย้งของรูปแบบซึ่งสามารถหลีกเลี่ยงได้โดยการแยกคลาส. topbar ออกเป็นคลาสแยกจากนั้นใช้เฉพาะส่วนที่คลาสที่กำหนดเองของฉันไม่ได้เหยียบ อีกครั้งสิ่งนี้ต้องใช้งานมากกว่าที่ฉันคิดว่าควรจำเป็นและในขณะที่มีความยืดหยุ่น แต่ก็ไม่อนุญาตให้ฉันอัปเดต bootstrap.css ได้อย่างง่ายดายเมื่อ Twitter ออกงวดถัดไป ใช้ตัวแปรใน. …

109 css  twitter-bootstrap  bootswatch 

ฉันมีรายการแบบเลื่อนลงต่อไปนี้ <label class="dropdown-toggle" role="button" data-toggle="dropdown" data-target="#"> Action <b class="caret"></b></label> <ul class="dropdown-menu" role="menu" aria-labelledby="lang-selector" id="lang-selector"> dropdown content goes here </ul> มุมซ้ายบนของเมนูแบบเลื่อนลงอยู่ที่มุมล่างซ้ายของข้อความ (Action) แต่ฉันหวังว่าตำแหน่งของมุมขวาบนของดร็อปดาวน์จะอยู่ที่ด้านขวาล่างของข้อความ ฉันจะทำเช่นนั้นได้อย่างไร?

109 css  twitter-bootstrap  drop-down-menu 

เมื่อใช้แบบอักษรความกว้างคงที่ผมต้องการระบุความกว้างขององค์ประกอบ HTML ในตัวละคร หน่วย "em" ควรมีความกว้างของอักขระ M ดังนั้นฉันจึงควรใช้เพื่อระบุความกว้างได้ นี่คือตัวอย่าง: <html> <head> <style> div { font-family: Courier; width: 10em; } </style> </head> <body> <div> 1 3 5 7 9 1 3 5 7 9 1 </div> </body> </html> ผลลัพธ์ไม่ใช่สิ่งที่ฉันต้องการเนื่องจากบรรทัดเบราว์เซอร์แตกหลังจากคอลัมน์ 15 ไม่ใช่ 10: 1 3 5 7 9 1 3 5 7 …

109 css  font-size