- 結論：連 html 與 body 都要設定 height:100%
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> html { height:100%; } body { height:100%; margin:0; padding:0; } div { border:1px solid black; background:green; height:100%; } </style> </head> <body> <div>long long long long long long long long text with break</div> </body> </html>
Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts
2012-07-31
CSS height:100% 無法佔滿畫面整個高度
表格(table, td) 的 overflow 屬性無作用
- 直接記結論如下：
- table 要加上 table-layout:fixed 的屬性
- table 要設定寬度 width 的屬性，僅有 td 設定寬度是不夠的！
- 如果連有空格分隔的段落也要隱藏，則加上 white-space:nowrap
- 「overflow:hidden」！
2008-11-06
用 token_get_all 分析 PHP 原始碼
- token_get_all() 將原始碼拆成陣列，每個陣列元素可能是字串或陣列，字串的話包括像等於、分號或大小括弧等，陣列的話則依序包括 token index 、內容跟所在行數。這裡的 token index 是整數，可以用 token_name() 轉成相對應的名字。
- 以下是簡單的範例，將每個元素用 <span> 包起來，並設定 class 為 token name ：
<?php
$source = file_get_contents(__FILE__);
$ary = token_get_all($source);
foreach ($ary as $key => $value) {
if (is_array($value)){
echo '<span class="' . token_name($value[0]) . '">' . htmlspecialchars($value[1]) . '</span>';
} else {
echo '<span>' . htmlspecialchars($value) . '</span>';
}
}
?> - 用 get_defined_constants 取得所有可用的 token (參見 PHP: List of Parser Tokens - Manual)：
<?php
$constants = get_defined_constants(true);
var_dump($constants['tokenizer']);
?> - 首先要注意的是， token_get_all 對原始碼分析的結果跟本機環境設定有關：
- 像 <?= 在 short_open_tag = On 的時候是 T_OPEN_TAG_WITH_ECHO ，反之則是 T_INLINE_HTML 。
- 我用的 PHP 5.2.6 就沒有 T_DIR 、 T_NS_C 這些 5.3 版才定義的 token 。
- 另外要注意的是，到了 CSS 2.1 才定義可以使用底線 (
_
; underscore) 做為 class name selector ，參見 CSS2 syntax and basic data types 與 Grammar of CSS 2.1，如果要將 token name 做為 CSS class selector 的話，最好將底線換為連字號 (-
; hyphen)
2007-10-13
text-overflow 自動截斷過長文字並補上省略符號
- IE 6 以上版本及 Opera (最早支援的版本未知，我目前用 9.23 是支援的) 支援
-
.ellipsis{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; /* for IE, O */ -o-text-overflow:ellipsis; /* for Opera priv */ width:10em; }<p class="ellipsis">這是一段沒什麼意義，但是很長、很長、很長、很長、很長、很長的文字。</p>
- 同時需設定 width(相對要設定display:block;) 、 overflow:hidden; 、 white-space:nowrap; 等屬性。
- MSDN textOverflow Property (defaults, A, ABBR, ...)
- jide.fr » Emulate text-overflow:ellipsis in Firefox with CSS
- 上一個鏈結提供的方式，我試用時得將(第12行)
html>body .ellipsis span:after {改成html>body .ellipsis:after {才能運作。
不得不駭(CSS) IE7
- 因為 IE7 增加/修正了一些對 CSS 標準的支援，其中支援 !important 應該是對(有用這項 CSS Hack 的)網站開發人員最麻煩的一項。
- 這也是不建議使用 CSS Hacks 的原因之一，某項 hack 有可能會遇到跨瀏覽器、跨版本支援等非預期的情況。
- CSS Hack « 就是愛程式
2007-09-27
IE 寬度解譯與建議標準不同的問題
- IE解析寬度(width)是內容寬度加上padding及border寬度。
- 而建議標準的寬度僅指內容寬度，不包括margin、padding與border的寬度。
- Cascading Style Sheets, level 1 Formatting model.
- 其中一個方法是個人不喜歡用的 CSS hack。
- 解決方法之一是用兩層block(如div)，並避免在對同一層同時定義width與padding跟border-width。像用內層的margin取代外層的padding等。
2007-09-19
匯入 CSS 用 link 與 import 的差別
- 外部引用CSS中 link與@import的區別
link定義於HTML且有其它功能，@import 定義於CSS2。link載入順序較 @import 高。
Subscribe to:
Posts (Atom)
