[css] CSS Reset，讓所有瀏覽器都長得一致

發表於 2026-06-04 由 sairwolf

參考網址：https://courses.hexschool.com/courses/666803/lectures/11948423

Eric Meyer Reset（經典版）
  

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* 需額外加入 article, footer, header 等標籤的 block display 定義 */

 

Normalize.css（現代主流）

與其全部歸零，Normalize.css 保留了實用的瀏覽器預設值，同時修正各瀏覽器的不一致性，提供更好的開發體驗。 [1, 2]

  • 使用方式：強烈建議直接載入 CDN 或 npm 安裝，無須手動複製整份。
  • CDN 連結：可至 cdnjs – normalize.css 取得最新版本並引入至 <head>。 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

 

發表於 程式設計 | 發表迴響

[sport]在 Firefox 中檢測和除錯 CSS Print 樣式（@media print）

發表於 2026-05-14 由 sairwolf

在 Firefox 中檢測和除錯 CSS Print 樣式（@media print），最直接的方法是使用開發者工具（DevTools）模擬列印媒體類型。您可以按下 F12 開啟工具，在「檢視器 (Inspector)」面板中，找到「切換列印媒體模擬 (Toggle print media simulation)」圖示（一個小印表機圖示），即可在螢幕上即時查看列印樣式。

發表於 程式設計 | 發表迴響

[sport]class=”mt-5 min-vh-100″ 列印時 多了一頁空白頁

發表於 2026-05-13 由 sairwolf

folk11505\templates\main.htm第二行
  

<section class="mt-5 min-vh-100 " >

導致列印時會多了一頁空白頁

列印時會多出一頁空白頁，核心原因在於 min-vh-100（min-height: 100vh）搭配 mt-5（margin-top）超出了單頁紙張的絕對高度。
在瀏覽器渲染中，100vh 代表整個可視視窗高度。當轉為列印模式時，100vh 會被視為「一張紙的滿頁高度」。此時如果加上頂部外距（mt-5），總高度就會變成「1 張紙的高度 + 頂部外距」，進而溢出並強行擠出第二頁空白頁。此外，許多瀏覽器預設的列印邊距也會與 100vh 累加導致溢出。

解決方案

請在 CSS 中加入 @media print（列印專用樣式），在列印時將高度與外距還原為自適應，即可完美消除空白頁。
  

@media print {
  /* 移除列印時的強置滿版高度與上外距 */
  .min-vh-100 {
    min-height: auto !important;
  }
  .mt-5 {
    margin-top: 0 !important;
  }
}

 

發表於 程式設計 | 發表迴響

[sport]sql group by指令，選代表的方法。

發表於 2026-05-07 由 sairwolf

長久以來一直被這個問題困惑著，sql下了group by 指令後，到底是選誰當代表。
之前觀察過，並不是選player_id中最小的。經過用不同的排序方式，終於解開了迷團。
(程式folk11505/test//groupby.php) 

//觀察group by選中的代表是誰？
//原來是依game_id排序後，第一個人。
include "../include/config.php";
//include "function.php";

//以folk11505為例
//pg_id 21 國小男童六年級組【扯鈴】
//pi_id 2,雙人賽     3,團體賽(四人賽)     4,團體賽(六人賽)     5,扯鈴接力賽
$pg_id=21;
$pi_id=5;

$sqlstr = " select game_id,player_id,play_group_id,play_item_id,gov_code,term_num,single from game where play_group_id ='$pg_id' and play_item_id ='$pi_id' order by gov_code,term_num,game_id ";
//echo "{$sqlstr}<br>";
$recordSet = $CONN->Execute($sqlstr) or die("<br>資料連結錯誤<br>\n $sqlstr ");
echo "game_id,player_id,play_group_id,play_item_id,gov_code,term_num,single<br>";
while ($row = @$recordSet->FetchRow() ) {
    echo $row[game_id].",";
    echo $row[player_id].",";
    echo $row[play_group_id].",";
    echo $row[play_item_id].",";
    echo $row[gov_code].",";
    echo $row[term_num].",";
    echo $row[single]."<br>";
}

 

發表於 程式設計 | 發表迴響

[AI]我的第一個用AI產生的可用程式

發表於 2026-04-28 由 sairwolf

參考網址：
4分鐘讓你學會用GEMINI AI作自己的網頁版APP
https://www.youtube.com/watch?v=k_KWyE_arW8


https://gemini.google.com/app

工具選擇canvas 模式選擇pro


需求：
我要作一個「番茄鐘」網頁，有5分鐘、10分鐘、15分鐘跟25分鐘的選項


再加入一個5秒的選項

音效大聲點

將程式碼改成網頁可執行的模式

結果：
https://gemini.google.com/share/80dbc30cfd95

https://sp.idv.tw/ai/tomato
 

發表於 程式設計 | 發表迴響

[sport]folk11504手機版網頁無法左右捲動

發表於 2026-04-28 由 sairwolf

參考網址：掌控捲動方式 – 自訂下拉即可重新整理和溢位效果

修改templates\main.htm第3行，加入style="overflow-x:auto" 

<section class="mt-5 min-vh-100" >
	<div class="container-fluid" style="overflow-x:auto">

 

發表於 程式設計 | 發表迴響

[App Inventor for iOS] App Inventor 終於也能吃 Apple！

發表於 2026-03-24 由 sairwolf

參考網址：茶米老師教室
https://www.youtube.com/watch?v=z9YmWY8FeII

發表於 ANDROID, 程式設計 | 發表迴響

[wordpress]wordpress被入侵，貼了好多的英文文章

發表於 2026-02-05 由 sairwolf

用tn sport的帳號貼了好多文章，已更改密碼，看看是否可以有效阻止。

發表於 軟體使用 | 發表迴響

[sogi]2024在安卓手機上使用大易輸入法

發表於 2026-01-13 由 sairwolf

參考網址：https://vocus.cc/article/661a5a13fd8978000178f188

F-Droid 是什麼？

https://f-droid.org/zh_Hant/

https://github.com/chinese-opendesktop/cin-tables/blob/master/dayi4.cin

這次要跟大家介紹的是F-Droid這個只包含自由及開放原始碼軟體的“類Play商店”。重點是在F-Droid上有一個複刻萊姆輸入法的APP-Sweet Lime，簡單的下載、安裝、設定後，最終我實現了輸入法自由！！

 

鍵盤型式改為大易字根鍵盤，打字體驗會比較接近實體鍵盤。

勾選【設定】（齒輪符號）裡的【啟動數字對應】與【啟動符號對應】，因為大易用到鍵盤中40個鍵（含英文字母、數字和符號），這兩項如果沒有勾選，假設打“中”這個字（字根為口言或英文的o1)，打了口再打言，沒有數字對應的話，“言”這個鍵不是字根，只是數字，出來就變成口1。
 

發表於 ANDROID, 軟體使用 | 發表迴響

[sport][folk]114年市長盃民俗體育自動填入合併組別名稱

發表於 2025-11-08 由 sairwolf

合併組時加入合併後組別名稱(target_group)及合併後組別英文名稱(target_group_eng)寫入modify_list資料表
在score\function.php中score2ms function中加入取得合併後組別名稱的功能merged_group_name($pg_id,$pi_id)

發表於 Linux系統, 程式設計 | 發表迴響