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

ฉันมี CSS บางอย่างที่วางเมาส์บนเอฟเฟกต์การเปลี่ยน CSS จะย้าย div ปัญหาดังที่คุณเห็นในตัวอย่างคือการtranslateเปลี่ยนแปลงมีผลข้างเคียงที่น่ากลัวในการทำให้ภาพในการเลื่อน div เคลื่อนไหวโดย 1px ลง / ขวา (และอาจจะปรับขนาดเล็กน้อยเลยหรือ?) เพื่อให้ปรากฏออกนอกสถานที่และ ออกจากโฟกัส ... ความผิดพลาดดูเหมือนว่าจะนำมาใช้ตลอดเวลาที่ใช้เอฟเฟกต์โฮเวอร์และจากขั้นตอนการทดลองและข้อผิดพลาดฉันสามารถพูดได้อย่างปลอดภัยเท่านั้นดูเหมือนว่าจะเกิดขึ้นเมื่อการเปลี่ยนแปลย้าย div (เงากล่องและความทึบก็ใช้เช่นกัน ข้อผิดพลาดเมื่อลบออก) ปัญหาดูเหมือนจะเกิดขึ้นเฉพาะเมื่อเพจนั้นมีแถบเลื่อน ดังนั้นตัวอย่างที่มีเพียงอินสแตนซ์เดียวของ div จึงใช้ได้ แต่เมื่อมีการเพิ่ม div ที่เหมือนกันอีกครั้งและหน้าเว็บต้องการแถบเลื่อนปัญหาจะเกิดขึ้นอีกครั้ง ...

150 css  image  hover  positioning  translate-animation 

ฉันได้อ่านข้อมูลที่ขัดแย้งกันเกี่ยวกับขีด จำกัด CSS ที่งี่เง่าของ Internet Explorer แล้ว ฉัน (คิดว่าฉันเป็น) เข้าใจว่าคุณสามารถมี 31 <style>และ<link>แท็ก (รวมกัน) และแต่ละแผ่นสามารถมีได้ถึง 31 @import-s (ดังนั้น 31 <link>-s แต่ละคนถึง 31 @import-s เป็นเรื่องที่ดีแม้ว่าจะบ้า) อย่างไรก็ตามกฎ 4095 นั้นชัดเจนน้อยกว่า - นี่คือกฎ 4095 ต่อเอกสารหรือต่อแผ่นงานหรือไม่ ตัวอย่างเช่นฉันสามารถ<link>ใช้สไตล์ชีตสองแบบแต่ละแบบมี 4,000 กฎและใช้งานได้หรือไม่หรือจะทำให้ขีด จำกัด หรือไม่ บุคคลที่สามแก้ไข 2018 ในบทความนี้คุณจะได้รับข้อมูลเพิ่มเติมเกี่ยวกับการโพสต์สไตล์ชีตข้อ จำกัด ในอินเทอร์เน็ต explorer

150 css  internet-explorer  stylesheet 

ใน angularjs คุณมีแท็ก NG-srcซึ่งมีวัตถุประสงค์ที่คุณจะไม่ได้รับความผิดพลาดสำหรับ URL ที่ไม่ถูกต้องก่อน angularjs ได้รับการประเมินผลการศึกษาตัวแปรที่อยู่ในระหว่างและ{{}} ปัญหาคือฉันใช้ DIV บางตัวพร้อมbackground-imageชุด URL ฉันทำเช่นนี้เพราะคุณสมบัติ CSS3 ที่ยอดเยี่ยมbackground-sizeซึ่งตัดภาพให้มีขนาดที่แน่นอนของ DIV ปัญหาเดียวคือฉันได้รับข้อผิดพลาดมากมายด้วยเหตุผลเดียวกันกับที่พวกเขาสร้างแท็ก ng-src: ฉันมีตัวแปรบางอย่างใน url และเบราว์เซอร์คิดว่าไม่มีภาพอยู่ ฉันรู้ว่ามีความเป็นไปได้ในการเขียนหยาบ{{"style='background-image:url(myVariableUrl)'"}}แต่ดูเหมือนว่า 'สกปรก' ฉันค้นหามากและไม่สามารถหาวิธีที่ถูกต้องในการทำเช่นนี้ แอพของฉันกำลังยุ่งเพราะข้อผิดพลาดเหล่านี้ทั้งหมด

150 css  angularjs 

ขณะนี้ฉันใช้ readonly = "อ่านอย่างเดียว" เพื่อปิดใช้งานฟิลด์ ตอนนี้ฉันพยายามจัดรูปแบบคุณลักษณะโดยใช้ CSS ฉันพยายามใช้ input[readonly] { /*styling info here*/ } แต่มันไม่ทำงานด้วยเหตุผลบางอย่าง ฉันยังลอง input[readonly='readonly'] { /*styling info here*/ } ที่ไม่ทำงานอย่างใดอย่างหนึ่ง ฉันจะจัดรูปแบบแอตทริบิวต์อ่านอย่างเดียวด้วย CSS ได้อย่างไร

150 html  css  css-selectors 

ฉันมีสองปัญหาจริง ๆ แต่ให้แก้ไขปัญหาหลักก่อนเพราะฉันเชื่อว่าอีกที่อยู่ง่ายกว่า ฉันมี div ตำแหน่งคงที่ที่ด้านซ้ายของสกรอลสำหรับเมนู ด้านขวาเป็น div มาตรฐานที่เลื่อนอย่างถูกต้อง ปัญหาคือเมื่อเบราว์เซอร์ดูพอร์ตมีขนาดเล็กเกินไปที่จะดูเมนูทั้งหมด .. ไม่มีวิธีใดที่จะเลื่อนดูที่ฉันสามารถหาได้ (อย่างน้อยก็ไม่ใช่ css) ฉันได้ลองใช้โอเวอร์โฟลว์ต่าง ๆ ใน css แต่ไม่มีอะไรทำให้ div เลื่อน div ที่มีเมนูตั้งไว้ที่ min-height: 100% และ position: fixed .. ทั้งสองคุณสมบัติที่ฉันต้องการเก็บไว้ div ที่มีเมนูอยู่ใน wrapper div อื่นที่อยู่ในตำแหน่งอย่างแน่นอนและตั้งค่าความสูงไว้ที่ 100% ฉันจะเลื่อนดูในแนวตั้งได้อย่างไรถ้าเนื้อหานั้นสูงเกินไปสำหรับ div ที่ทำให้ฉันไปที่ปัญหาอื่น ๆ ที่ฉันไม่ต้องการให้แถบเลื่อนเพื่อแสดง .. แต่ฉันคิดว่าฉันอาจมีคำตอบที่แล้ว (เฉพาะมันไม่ทำงานเพราะฉันไม่สามารถรับ div เพื่อเลื่อน เริ่มต้นกับ). ทางออกใด ๆ ? …

150 javascript  css  scroll  overflow  css-position 

ฉันมีรายการเพศที่เลือก รหัส: <select> <option>male</option> <option>female</option> <option>others</option> </select> ฉันต้องการใช้รูปภาพในรายการดรอปดาวน์เป็นดรอปดาวน์ไอคอน iconpeg ฉันต้องการเพิ่มปุ่มแทนไอคอนดรอปดาวน์ ทำอย่างไร

150 html  css 

ลองพิจารณาตัวอย่างต่อไปนี้: ( การสาธิตสดที่นี่ ) $(function() { console.log("width = " + $("td").width()); }); td { border: 1px solid black; width: 50px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tbody> <tr> <td>Hello Stack Overflow</td> </tr> </tbody> </table> เรียกใช้ข้อมูลโค้ดHide resultsขยายตัวอย่างข้อมูล ผลลัพธ์คือ: width = 139และจุดไข่ปลาไม่ปรากฏขึ้น ฉันหายไปนี่อะไร

150 html  css  ellipsis 

ฉันต้องการสไตล์ดังต่อไปนี้: forms.py: from django import forms class ContactForm(forms.Form): subject = forms.CharField(max_length=100) email = forms.EmailField(required=False) message = forms.CharField(widget=forms.Textarea) contact_form.html: <form action="" method="post"> <table> {{ form.as_table }} </table> <input type="submit" value="Submit"> </form> ตัวอย่างเช่นฉันจะตั้งค่าระดับหรือIDสำหรับsubject, email, messageเพื่อให้เป็นแผ่นลักษณะภายนอก?

150 css  django  django-forms 

นี่เป็นข้อผิดพลาดที่ฉันได้รับใน Chrome และน่าเสียดายที่การค้นหาไม่ได้ให้ผลลัพธ์ที่มากนัก ตัวอักษรปรากฏอย่างถูกต้อง อย่างไรก็ตามฉันยังคงได้รับข้อผิดพลาด / คำเตือนนี้ โดยเฉพาะอย่างยิ่งนี่คือคำเตือนแบบเต็ม: "ไม่สามารถถอดรหัสแบบอักษรที่ดาวน์โหลด: http: // localhost: 8000 / แอพ / แบบอักษร / Lato / " CSS ของฉันคือ: @font-face { font-family:"Lato"; src: url("../fonts/Lato/"); } html, body { font-family:'Lato'; } ฉันไม่เข้าใจ มีการใช้แบบอักษรอย่างถูกต้อง แต่มีการเตือนอยู่เสมอ ความพยายามในการใช้Sans-Serifทำให้แบบอักษรเปลี่ยนกลับเป็นแบบอักษรเบราว์เซอร์ปกติดังนั้นอาจเป็นได้ แต่ฉันไม่แน่ใจและแม้หลังจากการค้นหาฉันไม่พบอะไรเลย ขอบคุณ! แก้ไข มีไฟล์ตัวอักษรต่าง ๆ ทั้งหมดนี้มาจากตระกูลเดียวกัน ฉันกำลังพยายามโหลดทั้งหมด .ttfไฟล์ตัวอักษรเป็น ฉันกำลังโหลดพวกเขาจากโฟลเดอร์ท้องถิ่นและมีตัวอักษรไฟล์ต่างๆเช่นLato-Black.ttf, Lato-Bold.ttf, Lato-Italic.ttfฯลฯ

149 css  html  fonts 

ฉันต้องการทำให้ชิ้นส่วนของข้อความกะพริบสไตล์โรงเรียนเก่าโดยไม่ใช้ javascript หรือตกแต่งข้อความ ไม่มีช่วงการเปลี่ยนภาพเท่านั้น * กะพริบ *, * กะพริบ *, * กะพริบ *! แก้ไข : นี่แตกต่างจากคำถามนั้นเพราะฉันขอให้กระพริบโดยไม่มีการเปลี่ยนอย่างต่อเนื่องในขณะที่ OP ของคำถามอื่นถามว่าจะแทนที่กระพริบด้วยการเปลี่ยนอย่างต่อเนื่อง

149 html  css  css-animations  blink 

ฉันใช้องค์ประกอบผ้าใบ HTML5 เพื่อปรับขนาดภาพฉันเบราว์เซอร์ของฉัน ปรากฎว่ามีคุณภาพต่ำมาก ฉันพบสิ่งนี้: ปิดใช้งานการแก้ไขเมื่อปรับขนาด <canvas>แต่ไม่ช่วยเพิ่มคุณภาพ ด้านล่างนี้คือรหัส css และ js ของฉันรวมถึงรูปภาพที่เรียกว่า Photoshop และปรับขนาดใน Canvas API ฉันต้องทำอย่างไรเพื่อให้ได้คุณภาพสูงสุดเมื่อปรับขนาดรูปภาพในเบราว์เซอร์ หมายเหตุ: ฉันต้องการลดขนาดรูปภาพขนาดใหญ่ลงเป็นรูปภาพขนาดเล็กปรับสีในพื้นที่วาดภาพและส่งผลลัพธ์จากพื้นที่ไปยังเซิร์ฟเวอร์ CSS: canvas, img { image-rendering: optimizeQuality; image-rendering: -moz-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: optimize-contrast; -ms-interpolation-mode: nearest-neighbor; } JS: var $img = $('<img>'); var $originalCanvas = $('<canvas>'); $img.load(function() { var originalContext = $originalCanvas[0].getContext('2d'); originalContext.imageSmoothingEnabled …

149 javascript  css  html  canvas  html5-canvas 

CodePen: http://codepen.io/anon/pen/RPNpaP ฉันต้องการให้กล่องสีแดงกว้างเพียง 25 ซม. เมื่ออยู่ในมุมมองแบบเคียงข้างกัน - ฉันพยายามทำสิ่งนี้ให้สำเร็จด้วยการตั้งค่า CSS ในข้อความค้นหาสื่อนี้: @media all and (min-width: 811px) {...} ถึง: .flexbox .red { width: 25em; } แต่เมื่อฉันทำสิ่งนี้เกิดขึ้น: http://i.imgur.com/niFBrwt.png มีความคิดอะไรที่ฉันทำผิดหรือเปล่า?

149 html  css  flexbox 

ฉันเพิ่งเรียนรู้เกี่ยวกับหน่วย CSS ใหม่และไม่ธรรมดา vhและvwวัดเปอร์เซ็นต์ของความสูงและความกว้างของวิวพอร์ตตามลำดับ ฉันดูคำถามนี้จาก Stack Overflow แต่มันทำให้หน่วยดูคล้ายกันมากขึ้น หน่วย vw และ vh ทำงานอย่างไร คำตอบกล่าวโดยเฉพาะ vw และ vh เป็นเปอร์เซ็นต์ของความกว้างและความสูงของหน้าต่างตามลำดับ: 100vw คือ 100% ของความกว้าง 80vw คือ 80% เป็นต้น ดูเหมือนว่าจะเหมือนกับ%หน่วยซึ่งพบได้บ่อย ในเครื่องมือสำหรับนักพัฒนาฉันได้ลองเปลี่ยนค่าจาก vw / vh เป็น% และในทางกลับกันและได้ผลลัพธ์เดียวกัน มีความแตกต่างระหว่างทั้งสองหรือไม่? ถ้าไม่ทำไมถูกหน่วยใหม่เหล่านี้นำไปCSS3?

149 css  viewport-units 

ฉันต้องจัดกึ่งกลางเมนูแนวนอน ฉันได้ลองวิธีแก้ปัญหาต่าง ๆ รวมถึงการผสมผสานของinline-block/ block/ center-alignฯลฯ แต่ยังไม่ประสบความสำเร็จ นี่คือรหัสของฉัน: <div class="topmenu-design"> <!-- Top menu content: START --> <ul id="topmenu firstlevel"> <li class="firstli" id="node_id_64"><div><a href="#"><span>Om kampanjen</span></a></div></li> <li id="node_id_65"><div><a href="#"><span>Fakta om inneklima</span></a></div></li> <li class="lastli" id="node_id_66"><div><a href="#"><span>Statistikk</span></a></div></li> </ul> <!-- Top menu content: END --> </div> UPDATE ฉันรู้วิธีการศูนย์จัดภายในul divสามารถทำได้โดยใช้คำแนะนำของ Sarfraz ulแต่รายการที่มีการลอยยังเหลือภายใน ฉันต้องใช้ Javascript หรือไม่

148 css  xhtml  menuitem 

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

148 css  layout  html