# 疑難排解資料庫 ###### tags: `切切切` <!-- --> <style> .red{ color: #A94448; padding: 0 4px; } .mainTitle{ color: #005bba; } </style> ## <b class="mainTitle">專案移除 compass </b> [**簡報連結 🌐**](https://hackmd.io/@lizewu/rka_FRXKn) 解決SASS的禁用警告 [連結🌐](https://www.astralweb.com.tw/resolving-sass-deprecation-warning/) 使用較舊版本的SASS可參考 --- ## <b class="mainTitle">關於無障礙標籤應用</b> by 淑雅 [**相關連結 🌐**](https://hackmd.io/t4FCkXVPQUuBpUqNALdvFA) --- ## <b class="mainTitle">關於button</b> ### ⭐ `<button>` 與 `<a>` click 事件之比較 [簡報連結 🌐](https://hackmd.io/KiOFSrAHS4iGFJGU8z04ig?both) :::warning 某些情況下， `<a>` 元件被當成 `<button>` 元件，作為控制按鈕使用，而非預設的連結功能。此時 href 屬性的存在與否會影響滑鼠與鍵盤事件的回應動作。如需考量無障礙（可使用鍵盤操作），使用`<a>` 或 `<button>` ，程式的撰寫也有不同。 ::: --- ## <b class="mainTitle">關於字體</b> ### ⭐如何在本地端使用 Google Fonts https://gwfh.mranftl.com/fonts https://medium.com/@brian90191/%E5%A6%82%E4%BD%95%E5%9C%A8%E6%9C%AC%E5%9C%B0%E7%AB%AF%E4%BD%BF%E7%94%A8-google-fonts-49b83eb2ae5b ### ⭐ 注音字體使用方式 > 開源字型 以常見開放原始碼條款釋出的字型。原則上都可商用、再散佈，並且可以自行改造，不過改造後的字型通常需以相同授權條款釋出。 注音字型目前除了[王漢宗注音](https://zh.wikipedia.org/zh-tw/%E7%8E%8B%E6%BC%A2%E5%AE%97%E8%87%AA%E7%94%B1%E5%AD%97%E5%9E%8B)的中明注音體可免費使用外，其餘的要注意是否侵權 * https://www.pkstep.com/archives/68398 * https://github.com/ButTaiwan/bpmfvs/releases 使用方式：https://blog.gtwang.org/web-development/css-font-face/ 透過 @font-face 可以自己定義在 HTML 中使用的字體 ```sass= @import url('../font/wp010-05.ttf'); @font-face { font-family: '王漢宗注音'; src: url('../font/wp010-05.eot'); src: url('../font/wp010-05.ttf'); font-weight: normal; font-style: normal; } ``` --- ## <b class="mainTitle">關於slick</b > ### ⭐ 額外增加停止輪播按鍵 by 玟諭 #### <i class="fa fa-pencil fa-fw"></i> 解決方式： ![截圖 2024-10-30 下午5.23.10](https://hackmd.io/_uploads/SJ2sou1Z1e.png) ### ⭐ slick輪播，要怎麼設定第二個是一半的? #### <i class="fa fa-pencil fa-fw"></i> 解決方式： :::warning slidesToShow: 1.5,（可視需要露出的面積設定小數點，例如：1.1, 1.2....) ::: ```javascript= $('.presentation_slider').slick({ centerPadding: '60px', slidesToShow: 1.5, arrows: true, infinite: false, }); ``` [**範例連結 🌐**](https://hywebu00.github.io/2022_BSMI_iisp/ap_result_map.htm) ### ⭐ slick輪播，要怎麼設定兩排? #### <i class="fa fa-pencil fa-fw"></i> 解決方式： :::warning rows: 2, ::: ```javascript= $('.adSlider').slick({ rows: 2, mobileFirst: true, dots: false, infinite: true, }) ``` <iframe height="300" style="width: 100%;" scrolling="no" title="廣告輪播範例" src="https://codepen.io/mileyho/embed/QWrbOyq?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/mileyho/pen/QWrbOyq"> 廣告輪播範例</a> by Miley (<a href="https://codepen.io/mileyho">@mileyho</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ### ⭐ 在頁籤裡或是在收合展開裡，當slick無法展開時 #### <i class="fa fa-pencil fa-fw"></i> 解決方式： ```javascript //在那個js裡面加上 $('').slick('refresh'); $('') //這個換slick的元件 //例如： $('.chat_block .chat_btn>a').click(function() { $('.chat_group').show(); $('.recommendedbooks_slider').slick('refresh'); }) ``` [**範例連結 🌐**](https://hywebu00.github.io/2022_ncl_bigdata/mp.htm) --- ## <b class="mainTitle">關於頁籤</b> ### ⭐ 頁籤 tabItem 均分修正，可修改 gutter、border寬度 by Lize ：2022-1018 已更新至 hyui flex #### 修正前 <iframe height="500" style="width: 100%;" scrolling="no" title="Tabs / 頁籤 1" src="https://codepen.io/u00hyui/embed/PopZyGm?height=265&theme-id=dark&default-tab=js,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> </iframe> #### 修正後 <iframe height="300" style="width: 100%;" scrolling="no" title="Tabs / 頁籤2" src="https://codepen.io/Lize/embed/yLjLVdR?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/Lize/pen/yLjLVdR"> Tabs / 頁籤2</a> by Lize wu (<a href="https://codepen.io/Lize">@Lize</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ### ⭐ 2022 新版頁籤組（有 bugs） 頁籤項目集中放在一個容器中，無需計算頁籤的數量、高度等 by 雅瓊 無法back <iframe height="300" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/yachiung/embed/PoeqOXJ?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/yachiung/pen/PoeqOXJ"> Untitled</a> by yachiung (<a href="https://codepen.io/yachiung">@yachiung</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> --- ## <b class="mainTitle">關於flex box</b> ### ⭐ 設white-space: nowrap，導致flex父層被撐開的解決方案 by Veela : 2024.05.29 #### <i class="fa fa-pencil fa-fw"></i> 問題說明： 在 flex box 中，如果區塊 css 設定為 <code>flex-grow:1</code>，內部子元件設<code>white-space:nowrap</code>時會把外面的寬度撐開。 #### <i class="fa fa-pencil fa-fw"></i>解決方式： 設定 <code>flex-grow:1</code>時，還要同時設定 <code>min-width:0</code> ；或是不要使用<code>white-space:nowrap</code>，改用 <code>display: -webkit-box; -webkit-line-clamp: 1;-webkit-box-orient: vertical;</code>。 <iframe height="300" style="width: 100%;" scrolling="no" title="設white-space: nowrap，導致flex父層被撐開的解決方案" src="https://codepen.io/veelatseng/embed/dyENyqG?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/veelatseng/pen/dyENyqG"> 設white-space: nowrap，導致flex父層被撐開的解決方案</a> by veela Tseng (<a href="https://codepen.io/veelatseng">@veelatseng</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> [**連結 🌐**] by: 雅瓊 #### <i class="fa fa-pencil fa-fw"></i> 問題說明： ``` 在 flex box 中，如果含有 css 設定為 text-overflow: ellipsis; white-space: nowrap; overflow: hidden; 的子元件，flex box的寬度會被撐開，不會依照 <code>flex-basis</code> 的設定值呈現。 ``` #### <i class="fa fa-pencil fa-fw"></i>解決方式： 除了設定 <code>flex-basis</code> 的值，還要同時設定 <code>width</code> 的值。例如 <code>flex:0 0 25%; width:25%;</code>，該容器才不會因內含 <code>white-space: nowrap;</code> 的子元件而撐開寬度。 <iframe height="300" style="width: 100%;" scrolling="no" title="flex box 中的文字刪節 &lt;code&gt;text-overflow: ellipsis;&lt;/code&gt; " src="https://codepen.io/yachiung/embed/OJZVELG?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/yachiung/pen/OJZVELG"> flex box 中的文字刪節 &lt;code&gt;text-overflow: ellipsis;&lt;/code&gt; </a> by yachiung (<a href="https://codepen.io/yachiung">@yachiung</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ### ⭐ flex-flow: column wrap 父層無法撐開 :::warning 將 flex-direction: column; 改成 writing-mode: vertical-lr; PS: 該屬性會繼承，如子元素內的writing-mode要正常顯示，則需要覆蓋屬性writing-mode: horizontal- ::: by: 麥莉 ![](https://i.imgur.com/h9a4fr8.png) <iframe height="500" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/mileyho/embed/bGMdLQe?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/mileyho/pen/bGMdLQe"> Untitled</a> by Miley (<a href="https://codepen.io/mileyho">@mileyho</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> --- ## <b class="mainTitle">關於css </b> ### ⭐ css <code>width: 100vw</code> 與 windows 系統瀏覽器的水平卷軸 #### <i class="fa fa-pencil fa-fw"></i>問題說明： css 中如果有 <code>width: 100vw</code>，在 windows 系統（桌機）會因瀏覽器的垂直卷軸佔寬度，而導致出現水平卷軸。 #### <i class="fa fa-pencil fa-fw"></i>解決方式： - 不要設定寬度：許多 block 元件，如 div, section 寬度會自動撐滿。 - 以100%, 取代 100vw。 - 手機、平版不會有此問題，因為卷軸都是隱藏式的，不佔寬度。 --- ## <b class="mainTitle">關於列印</b> ### ⭐ 列印時，flex 排版會失效 by 雅瓊 : 2024.05.29 ### 列印時，區塊會有中斷被換頁的問題 by 玟諭 : 2024.08.21 #### <i class="fa fa-pencil fa-fw"></i>解決方式： >在區塊的css上， 加上 break-before: avoid; overflow: hidden; [**連結 🌐**](https://www.w3school.com.cn/cssref/pr_break-before.asp) [**範例連結 🌐**](https://hywebu00.github.io/2023_NHI/sp_%E5%AD%B8%E7%B6%93%E6%AD%B7.html) ### ⭐ 在 flex box 中有單行刪節文字的子元件 --- ## <b class="mainTitle">關於Fancybox</b> ### ⭐ Fancybox燈箱設定點了背景不可關閉，一定要點了視窗內的按鈕才可關閉。 by 淑雅 : 2024.08.22 #### <i class="fa fa-pencil fa-fw"></i>解決方式： >修改fancybox.umd.js 將backdropClick: 'close'改成 backdropClick: 'false' ## <b class="mainTitle">關於手機版</b> ### ⭐ iOS input/textarea focus時頁面放大 #### <i class="fa fa-pencil fa-fw"></i> 問題說明： 當input/textarea裡字體大小不是1em（16px）時，使用手機點擊input/textarea框時網頁會放大導致版面位移或產生橫向捲軸。 #### <i class="fa fa-pencil fa-fw"></i>解決方式： ### 方法一 #### 直接改meta 禁止畫面放大 ```不推``` ``` <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> ``` :::warning initial-scale - 初始的縮放比例 minimum-scale - 允許用戶縮放到的最小比例 maximum-scale - 允許用戶縮放到的最大比例 user-scalable - 用戶是否可以手動縮放 ::: - 缺點：網頁的縮放功能也被禁止了 ### 方法二 #### 輸入框中的字體改成 1rem ```css= input, textarea { font-size: 1rem; } ``` #### 手機版 字體大小改成 ```initial = font-size:16px;``` ```css= @media (max-width: 575.99px) { input, textarea { font-size: initial; } } ``` [https://hywebu00.github.io/2024_moea_grading/04.score.html](https://hywebu00.github.io/2024_moea_grading/04.score.html)