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

CSS (Cascading Style Sheets) เป็นภาษาสไตล์ชีตที่ใช้สำหรับอธิบายลักษณะและการจัดรูปแบบของ HTML (HyperText Markup Language), XML (Extensible Markup Language) เอกสาร XML และ Extensible Markup Language รวมถึงองค์ประกอบ SVG รวมถึง (แต่ไม่ จำกัด เฉพาะ) สีโครงร่างแบบอักษร และภาพเคลื่อนไหว นอกจากนี้ยังอธิบายถึงวิธีการแสดงองค์ประกอบบนหน้าจอบนกระดาษคำพูดหรือบนสื่ออื่น ๆ

3
การพิมพ์องค์ประกอบด้วย VueJS โดยใช้ห้องสมุดบุคคลที่สาม
ฉันกำลังทำงานกับตาราง HTML และพิมพ์ตารางนั้นไปยังเครื่องพิมพ์ที่ใช้html-to-paperใน vue.js สิ่งที่ฉันกำลังทำอยู่คือการคลิกเพิ่มการสร้างแถวใหม่จากนั้นเมื่อคลิกการพิมพ์ฉันกำลังพยายามพิมพ์ตาราง แต่ไม่ได้ถ่าย ข้อมูลใด ๆ แสดงเซลล์ว่างเท่านั้น รหัสแอป <template> <div id="app"> <button type="button" @click="btnOnClick">Add</button> <div id="printMe"> <table class="table table-striped table-hover table-bordered mainTable" id="Table"> <thead> <tr> <th class="itemName">Item Name</th> <th>Quantity</th> <th>Selling Price</th> <th>Amount</th> </tr> </thead> <tbody> <tr v-for="(tableData, k) in tableDatas" :key="k"> <td> <input class="form-control" readonly v-model="tableData.itemname" /> </td> …

5
วิธีหลีกเลี่ยง Chrome ซ่อนภาพพื้นหลังและสีบนอินพุตที่ป้อนอัตโนมัติ
Chrome Browserเติมเอฟเฟกต์ที่ลบออกโดยอัตโนมัติของbackground-colorและbackground-imageจากUsernameและPasswordช่องป้อนข้อมูล ก่อนเติมข้อความอัตโนมัติ หลังจากเติมข้อความอัตโนมัติ แต่การเติมข้อความอัตโนมัติของChrome Browserซ่อนไอคอนของฉันจากอินพุตและเปลี่ยนของฉันbackground-colorด้วย ดังนั้นฉันต้องการไอคอนของฉันอยู่ในอินพุตเหมือนเดิม เป็นไปได้ไหมที่จะหยุดChrome Browserจากการเปลี่ยนสีพื้นหลังของฟิลด์และซ่อนภาพ? .form-section .form-control { border-radius: 4px; background-color: #f7f8fa; border: none; padding-left: 62px; height: 51px; font-size: 16px; background-repeat: no-repeat; background-position: left 17px center; } .form-section .form-control:focus { -webkit-box-shadow: none; box-shadow: none; } .form-section .form-group { margin-bottom: 21px; } .form-section .form-control[type="email"] { background-image: url('https://i.stack.imgur.com/xhx3w.png'); …

5
ป้ายกำกับ HTML จะไม่ทริกเกอร์อินพุตที่เกี่ยวข้องหากเมาส์ถูกย้ายขณะคลิกใน Firefox
ในตัวอย่างต่อไปนี้เมื่อคุณคลิกที่ฉลากฉลากจะเปลี่ยนสถานะ document.querySelector("label").addEventListener("click", function() { console.log("clicked label"); }); label { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } <input type="checkbox" id="1"> <label for="1">Label</label> เรียกใช้ข้อมูลโค้ดHide resultsขยายตัวอย่างข้อมูล ใน Chrome เมื่อคุณเลื่อนเคอร์เซอร์ไปมาระหว่างmousedownและกับmouseupเหตุการณ์อินพุทยังคงได้รับการทริกเกอร์ในขณะที่ใน Firefox ช่องทำเครื่องหมายจะไม่เปลี่ยนสถานะ มีวิธีแก้ไขปัญหานี้หรือไม่? (โดยไม่ใช้ผู้ฟังเหตุการณ์ JavaScript) รุ่น Firefox: 69.0.3 (64-bit) ชุดเต็มของการกระทำเมื่อใช้โครเมี่ยม กดปุ่มบนฉลาก เลื่อนเคอร์เซอร์ไปรอบ ๆ (แม้ด้านนอกฉลาก) ในขณะที่ยังกดปุ่มค้างไว้ กลับเคอร์เซอร์กลับไปที่ฉลาก ปล่อยปุ่ม
13 javascript  html  css  label 

4
วิธีการจัดแนวข้อความทั้งหมดใน CSS ในแนวตั้ง?
ปัญหาน่าจะเป็นที่ตัวอักษรบางอย่างเช่นg, y, qและอื่น ๆ ที่มีหางที่เนินเขาลงไม่อนุญาตให้แนวตั้งตรงกลาง นี่คือภาพที่จะแสดงปัญหา ตัวละครในกล่องสีเขียวนั้นสมบูรณ์แบบเพราะไม่มีหางเลย ผู้ที่อยู่ในกล่องสีแดงแสดงให้เห็นถึงปัญหา ฉันต้องการให้ตัวละครทุกตัวอยู่กึ่งกลางแนวตั้งอย่างสมบูรณ์ ในภาพตัวละครที่มีหางลงไม่อยู่กึ่งกลางแนวตั้ง เป็นไปได้ที่จะแก้ไข? นี่คือไวโอลินที่แสดงให้เห็นถึงปัญหาที่เกิดขึ้นในเต็มรูปแบบ .avatar { border-radius: 50%; display: inline-block; text-align: center; width: 125px; height: 125px; font-size: 60px; background-color: rgb(81, 75, 93); font-family: "Segoe UI"; margin-bottom: 10px; } .character { position: relative; top: 50%; transform: translateY(-50%); line-height: 100%; color: #fff; } <div …

4
เหตุใดการตั้งค่าคุณสมบัติ CSS โดยใช้ Promise แล้วไม่เกิดขึ้นจริงในบล็อกนั้น
โปรดลองและเรียกใช้ตัวอย่างต่อไปนี้จากนั้นคลิกที่กล่อง const box = document.querySelector('.box') box.addEventListener('click', e => { if (!box.style.transform) { box.style.transform = 'translateX(100px)' new Promise(resolve => { setTimeout(() => { box.style.transition = 'none' box.style.transform = '' resolve('Transition complete') }, 2000) }).then(() => { box.style.transition = '' }) } }) .box { width: 100px; height: 100px; border-radius: 5px; background-color: …

3
ตารางเต็มหน้า TCPDF
ฉันลองทำหลายวิธีเพื่อจัดตารางให้พอดีกับหน้า (A4) ดังที่แสดงในรูปภาพ: ฉันค้นหาจำนวนมาก แต่ไม่พบสิ่งใดที่มีประโยชน์บนเว็บ ฉันใช้ตารางไดนามิกทุกอย่างก็โอเคยกเว้นความกว้างของตาราง นี่คือรหัสของฉัน: $content = '<table><thead><tr><th class="bg-dark text-white" align="center">#</th><th align="center" class="bg-dark text-white">Code</th><th align="left" class="bg-dark text-white">Description</th><th align="center" class="bg-dark text-white">Item Type</th></tr></thead><tbody><tr style="background-color: #f2f2f2;"><td align="center">1</td><td align="center">1001</td><td align="left">Pofak</td><td align="center">Fixed Price</td></tr><tr ><td align="center">2</td><td align="center">1002</td><td align="left">Ice</td><td align="center">Weight</td></tr><tr style="background-color: #f2f2f2;"><td align="center">3</td><td align="center">1003</td><td align="left">Minoo</td><td align="center">Fixed Price</td></tr><tr ><td align="center">4</td><td align="center">1004</td><td align="left">Bastani</td><td align="center">Fixed Price</td></tr><tr style="background-color: #f2f2f2;"><td …
11 php  html  css  tcpdf 

3
การคงตำแหน่งการเลื่อนจะใช้งานได้เฉพาะเมื่อไม่ได้อยู่ใกล้กับด้านล่างของ div
ฉันกำลังพยายามเลียนแบบแอพแชทมือถืออื่น ๆ ซึ่งเมื่อคุณเลือกsend-messageกล่องข้อความและมันเปิดแป้นพิมพ์เสมือนจริงข้อความล่างสุดยังคงอยู่ในมุมมอง ดูเหมือนจะไม่มีทางทำสิ่งนี้กับ CSS อย่างน่าอัศจรรย์ดังนั้น JavaScript resize(วิธีเดียวที่จะค้นหาว่าเมื่อใดที่แป้นพิมพ์ถูกเปิดและปิดอย่างเห็นได้ชัด) เหตุการณ์และการเลื่อนด้วยตนเองเพื่อช่วยเหลือ มีคนให้โซลูชันนี้และฉันพบวิธีแก้ปัญหานี้ซึ่งทั้งคู่ดูเหมือนจะใช้งานได้ ยกเว้นในกรณีเดียว สำหรับบางเหตุผลถ้าคุณอยู่ในMOBILE_KEYBOARD_HEIGHT(250 พิกเซลในกรณีของฉัน) พิกเซลด้านล่างของข้อความ div เมื่อคุณปิดแป้นพิมพ์มือถืออะไรแปลก ๆ เกิดขึ้น ด้วยวิธีการแก้ปัญหาเดิมมันเลื่อนไปที่ด้านล่าง และด้วยวิธีแก้ปัญหาหลังมันจะเลื่อนMOBILE_KEYBOARD_HEIGHTพิกเซลขึ้นจากด้านล่างแทน หากคุณเลื่อนไปที่ความสูงนี้โซลูชันทั้งสองที่ให้ไว้ข้างต้นจะทำงานได้อย่างไม่มีที่ติ เฉพาะเมื่อคุณอยู่ใกล้ด้านล่างสุดที่พวกเขามีปัญหาเล็กน้อยนี้ ฉันคิดว่าบางทีมันเป็นเพียงโปรแกรมของฉันที่ทำให้เกิดสิ่งนี้ด้วยรหัสหลงทางแปลก ๆ แต่ไม่ฉันทำซ้ำซอและมีปัญหาตรงนี้ ฉันขอโทษที่ทำให้สิ่งนี้ยากต่อการแก้ไข แต่ถ้าคุณไปที่https://jsfiddle.net/t596hy8d/6/show (ส่วนต่อท้ายของการแสดงเป็นโหมดเต็มหน้าจอ) บนโทรศัพท์ของคุณคุณควรจะเห็น พฤติกรรมเดียวกัน หากคุณเลื่อนขึ้นมามากพอการเปิดและปิดแป้นพิมพ์จะรักษาตำแหน่งไว้ อย่างไรก็ตามหากคุณปิดแป้นพิมพ์ภายในMOBILE_KEYBOARD_HEIGHTพิกเซลที่ด้านล่างคุณจะพบว่ามันเลื่อนไปที่ด้านล่างแทน อะไรทำให้เกิดสิ่งนี้ การสร้างรหัสที่นี่: window.onload = function(e){ document.querySelector(".messages").scrollTop = 10000; bottomScroller(document.querySelector(".messages")); } function bottomScroller(scroller) { let scrollBottom = scroller.scrollHeight - …

11
ป้องกันการเลื่อนขึ้น div เมื่อชนด้านล่างโดย div หรือไม่
ฉันถามคำถามที่คล้ายกันเมื่อวานนี้ แต่อธิบายได้ไม่ดีและไม่ได้ระบุความต้องการของฉันสำหรับโซลูชัน CSS บริสุทธิ์ซึ่งฉันคิดว่าควรจะเป็นไปได้ดังนั้นฉันจึงลองอีกครั้ง โดยทั่วไปฉันมีปัญหาที่ฉันมี div ของข้อความที่เลื่อนได้และฟิลด์อินพุตด้านล่าง เมื่อฉันคลิกปุ่มฉันต้องการให้ฟิลด์อินพุตมีการชนกันที่ 100 พิกเซลโดยไม่ต้องเลื่อน div ของข้อความด้วย นี่คือซอที่แสดงให้เห็นถึงปัญหาอย่างครบถ้วน อย่างที่คุณเห็นเมื่อคุณคลิกปุ่ม "เพิ่มระยะขอบ" ข้อความ div จะเลื่อนขึ้นเช่นกัน ฉันอยากให้มันอยู่ตรงไหน ในทำนองเดียวกันหากคุณเลื่อนขึ้นเล็กน้อยเพื่อให้คุณเห็นข้อความที่สองถึงข้อความสุดท้ายเท่านั้นการคลิกที่ปุ่มควรจะรักษาตำแหน่งนั้นไว้ในทำนองเดียวกันเมื่อคลิก สิ่งที่น่าสนใจคือพฤติกรรมนี้ "บางครั้ง" เก็บรักษาไว้ ตัวอย่างเช่นในบางสถานการณ์ (ซึ่งฉันไม่สามารถอนุมานได้มาก) ตำแหน่งการเลื่อนจะยังคงอยู่ ฉันแค่อยากให้มันประพฤติอย่างสม่ำเสมอ window.onload = function(e) { document.querySelector(".messages").scrollTop = 10000; }; function test() { document.querySelector(".send-message").classList.toggle("some-margin"); } .container { width: 400px; height: 300px; border: 1px solid #333; …

9
วิธีสร้าง <div> ให้เติมหน้าต่างเบราว์เซอร์อย่างแน่นอนรวมถึง Mobile Safari ตั้งแต่ 2019
ฉันกำลังทำงานกับเว็บแอปเดียวซึ่งโดยทั่วไปจะใช้กับอุปกรณ์มือถือ หนึ่งในคุณสมบัติของมันคือโหมดแผนที่ซึ่งใช้งานชั่วคราวผ่านหน้าต่างเบราว์เซอร์ทั้งหมด มาตรวัดระยะทางและการควบคุมบางอย่างเชื่อมต่อกับมุมทั้งสี่ของแผนที่ นี่คือภาพหน้าจอเล็ก ๆ ของแผนที่เพื่อให้คุณสามารถบอกสิ่งที่ฉันกำลังพูดถึง: แผนที่จะถูกนำมาใช้เช่นเดียว&lt;div&gt;กับกับposition: fixedและทั้งสี่พิกัดศูนย์; ฉันยังตั้งชั่วคราว&lt;body&gt;ไปoverflow: hiddenในขณะที่แผนที่จะมองเห็นได้ในการจัดการกับกรณีของจอแสดงผลแอปพื้นฐานที่ถูกเลื่อนออกไปจากแหล่งกำเนิด เพียงพอแล้วที่จะทำให้แผนที่ทำงานตามที่ฉันต้องการบนเบราว์เซอร์เดสก์ท็อป เบราว์เซอร์มือถือยังต้องการให้ฉันให้เมตาวิวพอร์ตแท็กกับบางสิ่งบางอย่าง"width=device-width,user-scalable=no"เพื่อให้พื้นที่ที่มองเห็นของหน้าต่างตรงกับวิวพอร์ต ทั้งหมดนี้ใช้งานได้อย่างสวยงามไม่กี่ปีก่อนตอนที่ฉันเขียนแอพนี้ แต่ที่ใดที่หนึ่งตามแนว iOS Safari หยุดไม่ให้เกียรติตัวเลือก meta viewport ใด ๆ ที่เกี่ยวข้องกับการปรับขนาด - ดูเหมือนว่าเว็บไซต์จำนวนมากเกินไปใช้แท็กผิด ยังไม่สามารถซูมได้ ปัจจุบันหากคุณเปิดใช้งานแผนที่บนเบราว์เซอร์นี้คุณมีโอกาสที่จะได้รับมุมมองซูมที่เล็กน้อยซึ่งจะตัดปุ่มเหล่านั้นที่ด้านขวาและด้านล่างและคุณไม่สามารถทำอะไรกับมันได้เนื่องจากสัมผัสทั้งหมดถูกตีความว่าเป็นการซูม / แพนด้วยท่าทางของแผนที่ไม่ใช่การเลื่อนเบราว์เซอร์ แผนที่ไม่ได้มีประโยชน์มากนักหากไม่มีคุณสมบัติที่เข้าถึงผ่านปุ่มเหล่านั้น - และหากไม่มีปุ่มบนขวาคุณจะไม่สามารถปิดแผนที่ได้ ทางออกเดียวคือโหลดหน้าซ้ำซึ่งอาจทำให้ข้อมูลที่ไม่ได้บันทึกสูญหาย ฉันจะเพิ่มการใช้history.pushState/ onpopstateเพื่อให้การซ้อนทับแผนที่ทำงานเหมือนหน้าอื่น ๆ คุณสามารถออกจากโหมดแผนที่โดยใช้ปุ่มย้อนกลับของเบราว์เซอร์ - แต่นั่นไม่ได้หมายความว่าฟังก์ชั่นที่เหลือจะหายไปจากปุ่มที่หายไป ฉันได้พิจารณาที่.requestFullscreen()จะใช้การวางซ้อนแผนที่ แต่ไม่รองรับทุกที่ที่แอปจะใช้งานได้ โดยเฉพาะอย่างยิ่งดูเหมือนว่าจะไม่สามารถใช้งานได้บน iPhone และบน iPads คุณจะได้รับแถบสถานะและปุ่ม 'X' ขนาดใหญ่ซ้อนทับเนื้อหาของคุณ - มาตรวัดระยะทางของฉันอาจไม่สามารถอ่านได้อีกต่อไป มันไม่ใช่ความหมายที่ฉันต้องการจริงๆใช่ไหม …

1
iOS Chrome คำนวณความสูงที่ไม่ถูกต้องของเอกสาร
เพื่อเติมเต็มความสูงทั้งหมดของหน้าฉันใช้height: 100%;สำหรับ html และแท็กเนื้อหาและทำงานได้ดีจนกว่าจะปิดและเปิดเบราว์เซอร์ใหม่ (ฉันไม่ได้ใช้ 100vh เพราะปัญหาบนอุปกรณ์มือถือhttps://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in -some-mobile-browser.html ) ขั้นตอนในการทำซ้ำ: เปิดhttps://angelika94.github.io/rick/ใน Google Chrome บน iPhone (คุณจะเห็นว่าการนำทาง (Morty and Beer) วางอยู่ที่ด้านล่างของหน้า) สกรีนช็อตของ css Rick พร้อมการนำทาง ปิดเบราว์เซอร์และลบออกจากการนำทางมัลติทาสก์: https://support.apple.com/th-th/HT201330 เปิดเบราว์เซอร์อีกครั้ง (คุณจะเห็นว่าการนำทางด้านล่างย้ายออกจาก "หน้าจอแรก" และตอนนี้คุณต้องเลื่อนเพื่อดู) ภาพหน้าจอของ css Rick ไม่มีการนำทาง หน้าจะได้รับการแก้ไขด้วยตัวเองในกรณีเหล่านี้: อัปเดตหน้า หมุนอุปกรณ์เป็นแนวนอน เปิดและปิดการนำทางของเบราว์เซอร์โดยแท็บ ปิดและเปิดเบราว์เซอร์ใหม่โดยไม่ต้องปิดในมัลติทาสก์ nav ทำไมมันเกิดขึ้น ฉันจะแก้ไขพฤติกรรมนี้ได้อย่างไร ขอบคุณล่วงหน้า!

1
วิธีแทรกแบบอักษรใน CSS ด้วย webpack
พื้นหลังของปัญหา: ฉันใช้ katex เพื่อแสดงผลทางคณิตศาสตร์บางอย่างบนหน้าเว็บ จากนั้นฉันต้องการสร้างส่วน PDF ของหน้านั้นดังนั้นฉันจึงสร้างเอกสาร HTML ที่มีส่วนที่จะส่งออกที่อินไลน์ CSS ทั้งหมดและส่งต่อไปยัง renderer ตัวแสดงภาพไม่สามารถเข้าถึงทรัพยากรของโหนดได้นั่นคือสาเหตุที่ทุกอย่างถูกแทรกไว้ มันทำงานได้อย่างสมบูรณ์แบบยกเว้นแบบอักษร ฉันลองทั้ง url-loader และ bas64-inline-loader แต่ฟอนต์ที่สร้างขึ้นไม่ได้ถูกแทรก ฉันตรวจสอบ CSS ที่สร้างขึ้นในดีบักเกอร์และ URL เก่ายังอยู่ในนั้นไม่มี data-URL สำหรับแบบอักษร นี่คือ webpack.config.js ปัจจุบันของฉัน: const path = require('path'); const {CleanWebpackPlugin} = require('clean-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'development', entry: { "editor": './src/editor.js', …

2
ปัญหาเกี่ยวกับ“ พื้นที่สีขาว: nowrap” บน Chrome 78.0.3904.70
ตั้งแต่รุ่นของ Chrome v78.0.3904.70 ที่ผมเห็นปัญหาเกี่ยวกับการใช้กับสถานที่ให้บริการแบบ&amp;nbsp; CSS white-space: nowrap;พื้นที่ที่ไม่แตกดูเหมือนจะทำให้เกิดการแบ่งบรรทัด เมื่อใช้text-overflow: ellipsisข้อความจริงจะไม่ปรากฏเนื่องจากมีการแตกด้านนอกของคอนเทนเนอร์ ดูเหมือนว่าจะเกิดขึ้นหากข้อความยาวเกินกว่าจะแสดงได้ .box-inline { max-width: 120px; overflow: hidden; height: 16px; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; } &lt;div class="mar-rgt box-inline text-sm"&gt;&lt;span class="label" style="background: rgb(176, 223, 246);"&gt;&lt;/span&gt;&amp;nbsp;Not meeting expecations&lt;/div&gt; เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล มันก่อให้เกิดปัญหาการแสดงผลสองสามประการเกี่ยวกับแอปพลิเคชันของเรา นี่เป็นข้อผิดพลาดหรือมีบางอย่างผิดปกติกับรหัสของฉันหรือไม่ รหัสนี้ถูกสร้างการแสดงผลใน React 16

2
ตำแหน่ง iPhone ริบหรี่เหนียว
ติดตามรหัสของฉันเล็กน้อย เพียงแค่อยากรู้ว่าทำไมเซลล์ "iphone" กะพริบจาก iphone เท่านั้น PS ฉันไม่สามารถใช้ตารางหรือรายการสำหรับโครงสร้าง ฉันก็ลองใช้transform: translate3d(0,0,0);ดู โดยทั่วไปฉันต้องการเซลล์แรกที่จะติดทั้งด้านซ้ายและด้านบนใน iPhone และ iPad ด้วย ฉันต้องการทำสิ่งนั้นโดยใช้ HTML และ CSS เท่านั้น สิ่งสำคัญ กรุณาอย่าตอบด้วยการแก้ไขปัญหาฉันไม่ทราบว่าจะวางตารางในร่างกาย จะมีส่วนหัวเนื้อหาบางส่วน ฯลฯ เป็นต้น แสดงตัวอย่างโค้ด .table { width: 2000px; position: relative; } .tr { overflow: visible; display: block; white-space: nowrap; font-size: 0; } .tc { border: 1px solid #DDD; …
10 html  css 

2
วิธีป้องกัน iOS 13 Dark Mode จากการทำลายอีเมล
เรามีแอพอีคอมเมิร์ซที่ส่งรายละเอียดคำสั่งซื้อเมื่อทำการซื้อและเราเพิ่งออกแบบเทมเพลตอีเมลนั้นใหม่ เราได้รับรายงานในช่วงไม่กี่วันที่ผ่านมาของลูกค้าบางคนที่มีข้อความครึ่งหนึ่งในอีเมลหายไป ในที่สุดหลังจากได้รับภาพหน้าจอเราได้เรียนรู้ว่าปัญหาเกิดขึ้นบน iPhone โดยใช้โหมดมืด จนถึงตอนนี้พวกเขาทั้งหมดเป็นลูกค้าที่ใช้ gmail กับแอป Mail หรือกับ Safari (ทั้งคู่มีปัญหาเดียวกัน) ฉันไม่แน่ใจว่าปัจจัย gmail นั้นเกี่ยวข้องหรือบังเอิญ อีเมลของเรานั้นเรียบง่ายมีพื้นหลังสีขาวหัวสีเทาและตัวอักษรสีดำ โหมดมืดกำลังออกจากพื้นหลังสีขาวและส่วนหัวสีเทาไม่มีการแตะ แต่ข้อความเนื้อหาจะถูกเปลี่ยนจากสีดำเป็นสีขาว บนพื้นหลังสีขาวข้อความสีขาวจะมองไม่เห็นอย่างชัดเจนและอีเมลดูเหมือนว่าขาดเนื้อหาจำนวนมาก มีอะไรบ้างที่สามารถทำได้เพื่อป้องกันไม่ให้โหมดมืดเปลี่ยนข้อความจากขาวดำเป็นสีขาว? ฉันควรทราบว่าเรายังมีรหัส QR ฝังอยู่ในอีเมลด้วยดังนั้นฉันจึงกังวลเกี่ยวกับโซลูชันที่จะช่วยให้โหมดมืดดำเนินการในการเปลี่ยนสีอีเมลเต็มรูปแบบของเราเนื่องจากฉันเชื่อว่ามันจะทำให้จดจำรหัส QR ได้ยากขึ้น . แก้ไข: สิ่งนี้ไม่เกี่ยวข้องกับรหัสแอพใด ๆ ดังนั้นแนวทางในการพัฒนา iOS สำหรับโหมดมืดไม่ได้ใช้ นี่เป็นเพียงปัญหาว่าแอปอีเมลของ Apple บน iOS 13 ในโหมดมืดกำลังแสดงอีเมล HTML
10 ios  css  email  gmail  ios-darkmode 

2
วิธีปิดการใช้งานปุ่มส่ง & ลิงก์เมื่อคลิกใน CSS บริสุทธิ์
ฉันได้ท้าทายตัวเองในการสร้างประสบการณ์แบบโต้ตอบและโต้ตอบในรูปแบบ HTML และ CSS เท่านั้น (ไม่มี Javascript) จนถึงตอนนี้ฉันยังไม่พบคุณลักษณะใด ๆ ที่ฉันต้องการซึ่งฉันไม่สามารถทำได้ใน CSS และ HTML ล้วนๆ อันนี้อาจจะยากหน่อย ฉันต้องการที่จะป้องกันผู้ใช้จากการดับเบิลคลิก&lt;a&gt;, &lt;input type="submit"&gt;และ&lt;button&gt;แท็ก นี่คือการป้องกันไม่ให้ส่งแบบฟอร์มซ้ำซ้อนหรือส่งคำขอ 2 GET ไปยัง URL โดยไม่ได้ตั้งใจ สิ่งนี้สามารถทำได้ใน CSS บริสุทธิ์ แม้ว่าเราจะไม่สามารถตั้งค่าได้disabledหากปราศจาก JS แต่ควรมีเทคนิคการปิดบังหรือการผสมผสานของสไตล์ที่สามารถจัดการได้ที่นี่ในปี 2020 นี่คือตัวอย่างง่ายๆของความพยายาม: .clicky:focus{ display: none; pointer-events: none; } &lt;a href="#down" class="clicky"&gt;test&lt;/a&gt; &lt;p&gt;&amp;nbsp;&lt;/p&gt; &lt;p&gt;&amp;nbsp;&lt;/p&gt; &lt;p&gt;&amp;nbsp;&lt;/p&gt; &lt;p&gt;&amp;nbsp;&lt;/p&gt; &lt;p&gt;&amp;nbsp;&lt;/p&gt; &lt;p&gt;&amp;nbsp;&lt;/p&gt; &lt;p&gt;&amp;nbsp;&lt;/p&gt; &lt;p&gt;&amp;nbsp;&lt;/p&gt; &lt;p&gt;&amp;nbsp;&lt;/p&gt; …
9 html  css 

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.