* [CODE(CSS)@en['overflow']] 特性 (CSS) [1] [WEAK[2003-02-12 15:21]] ''[[名無しさん]]'': [[Mozilla]] の今の実装の scroll bar はどうも不安定。 [CODE(CSS)[overflow:scroll]] や [[textarea]] 要素によってでてくる scroll bar はスタイル指定の相性?できえがち。 [2] [CITE[overflow プロパティは擬似フレームも作成できる]] [3] [SAMP(CSS)[overflow: -moz-hidden-unscrollable;]] [4] [CITE[overflowの解釈、間違ってませんか? - WebStudio]] ([[名無しさん]] [WEAK[2005-09-21 03:23:30 +00:00]]) [5] [CITE[Bug 6976 - Horizontal scrollbar is missing. {was: "create scrollbar for / allow scrolling to overflow top (above) / left of container (Left side of the page is cut)"}]] ([[名無しさん]] [WEAK[2005-12-18 23:54:22 +00:00]]) [7] [CODE(CSS example)@en[overflow: [[-webkit-marquee]]]] [15] [CITE[Operaのバグ発見 二つ目:メモランダム]] ([CODE[2007-08-04 03:44:15 +09:00]] 版) ([[名無しさん]]) [16] [CITE[IT戦記 - body の overflow: hidden が変]] ([CODE[2007-08-18 12:50:19 +09:00]] 版) ([[名無しさん]] [WEAK[2007-08-18 07:31:33 +00:00]]) [6] [[WinIE 6]] における [CODE(CSS)@en[[[overflow]]]], [CODE(CSS)@en[[[overflow-x]]]], [CODE(CSS)@en[[[overflow-y]]]] は、 [[CSSOM]] や [CODE(DOMa)@en[[[cssText]]]] 的には、 無関係の[[特性]]として扱われているようです。 [8] [[Firefox]] 2 における [CODE(CSS)@en[[[overflow]]]] は、 [CODE(CSS)@en[[[overflow-x]]]] と [CODE(CSS)@en[[[overflow-y]]]] の [[shorthand]] として扱われているようです。 ;; [9] [[Opera]] 9 は [CODE(CSS)@en[[[overflow-x]]]] と [CODE(CSS)@en[[[overflow-y]]]] を実装していません。 * [CODE(XMLe)@en[math]] 要素 [CODE(XMLa)@en[overflow]] 属性 (MathML) [20] [[MathML]] の [CODE(XMLe)@en[[[math]]]] [[要素]]の [DFN[[CODE(XMLa)@en[[[overflow]]]] [[属性]]]]は、 [[数式]]が[[幅]]に対して長すぎるときに[RUBYB[好ましい]@en[preferred]]取扱いを指定します。 [SRC[>>21]] ** 仕様書 - [21] [CITE[MathML Fundamentals]] ([TIME[2010-10-21 05:51:46 +09:00]] 版) ** 属性値 *** データ型 [22] [[属性値]]には次のものがあります [SRC[>>21]]。 - [CODE(XML)@en[[[linebreak]]]] - [CODE(XML)@en[[[scroll]]]] - [CODE(XML)@en[[[elide]]]] - [CODE(XML)@en[[[truncate]]]] - [CODE(XML)@en[[[scale]]]] *** 既定値 [23] この属性の[[既定値]]は [CODE(XML)@en[[[linebreak]]]] です [SRC[>>21]]。 ** 処理モデル [24] 「[RUBYB[好ましい]@en[preferred]]」、「[RUBYB[提案する]@en[suggest]]」という語が仕様書上使われていて [SRC[>>21]]、この[[属性]]の値に従うかどうかは[[レンダリング器]]に委ねられているようです。 ** 関連 [25] [[CSS]] の [CODE(CSS)@en['[[overflow]]']] [[特性]]と名前や意味は似ていますが、 実際には違いが多いです。例えば [[MathML]] の [CODE(XML)@en[[[scroll]]]] は [[CSS]] における [CODE(CSS)@en['[[auto]]']] に近い意味です。 * Viewport のスクロールバー [17] [CODE(HTMLe)@en[[[html]]]] [[要素]]や [CODE(HTMLe)@en[[[body]]]] [[要素]]に [CODE(CSS)@en[[[overflow]]: [[scroll]]]] や [CODE(CSS)@en[[[width]]]] や [CODE(CSS)@en[[[height]]]] を指定してみました。 ;; の body-body-scroll、html-body-scroll、html-html-scroll、html-html-body-scroll。 - [[Firefox3]] -- モードによる違いなし。 -- [CODE(HTMLe)@en[[[html]]]] と [CODE(HTMLe)@en[[[body]]]] の外側の方の [CODE(CSS)@en[[[overflow]]]] が [[viewport]] に適用される。 -- [CODE(CSS)@en[[[overflow]]]] が [[viewport]] に反映される場合、[[要素]]の[[箱]]は [CODE(CSS)@en[[[visible]]]] 扱い ([[内容]]がはみ出る)。 -- [CODE(CSS)@en[[[width]]]]、[CODE(CSS)@en[[[height]]]] は[[要素]]の[[箱]]に反映される。 -- 両方共 [CODE(CSS)@en[[[overflow]]]] を指定すれば [CODE(HTMLe)@en[[[body]]]] の[[箱]]にも[[スクロールバー]]が出る。 - [[Safari3]] -- モードによる違いなし。 -- [CODE(HTMLe)@en[[[html]]]] と [CODE(HTMLe)@en[[[body]]]] の外側の方の [CODE(CSS)@en[[[overflow]]]] が [[viewport]] に適用される。 -- [CODE(CSS)@en[[[overflow]]]] が [[viewport]] に反映される場合、[[要素]]の[[箱]]は [CODE(CSS)@en[[[visible]]]] 扱い ([[内容]]がはみ出る)。 -- [CODE(CSS)@en[[[width]]]]、[CODE(CSS)@en[[[height]]]] は[[要素]]の[[箱]]に反映される。 -- 両方共 [CODE(CSS)@en[[[overflow]]]] を指定しても [CODE(HTMLe)@en[[[body]]]] の[[箱]]にも[[スクロールバー]]は出ない ([[内容]]がはみ出る)。 - [[Opera9]] -- [[奇癖モード]]では [CODE(CSS)@en[[[height]]]] を指定しても[[内容]]に合わせて伸びる。 -- [CODE(HTMLe)@en[[[html]]]] と [CODE(HTMLe)@en[[[body]]]] の外側の方の [CODE(CSS)@en[[[overflow]]]] が [[viewport]] に適用される。 -- [CODE(CSS)@en[[[overflow]]]] が [[viewport]] に反映される場合、[[要素]]の[[箱]]は [CODE(CSS)@en[[[visible]]]] 扱い ([[内容]]がはみ出る)。 -- [CODE(CSS)@en[[[width]]]]、[CODE(CSS)@en[[[height]]]] は原則として[[要素]]の[[箱]]に反映される。 -- 両方共 [CODE(CSS)@en[[[overflow]]]] を指定すれば [CODE(HTMLe)@en[[[body]]]] の[[箱]]にも[[スクロールバー]]が出る。 - [[WinIE7]] -- [CODE(HTMLe)@en[[[body]]]] に [CODE(CSS)@en[[[overflow]]]] を指定すると、 --- [[無奇癖モード]]: [[要素]]の[[箱]]に[[スクロールバー]]が出る。 [CODE(HTMLe)@en[[[body]]]] の [CODE(CSS)@en[[[width]]]]、 [CODE(CSS)@en[[[height]]]] は[[箱]]に適用される。 --- [[奇癖モード]]: [CODE(CSS)@en[[[overflow]]]] は [[viewport]] に適用される。 [CODE(HTMLe)@en[[[body]]]] の [CODE(CSS)@en[[[width]]]]、 [CODE(CSS)@en[[[height]]]] は無視される。 -- [CODE(HTMLe)@en[[[html]]]] に [CODE(CSS)@en[[[overflow]]]] を指定すると、 --- [[無奇癖モード]]: [CODE(CSS)@en[[[overflow]]]] は [[viewport]] に適用される。 [CODE(HTMLe)@en[[[html]]]] の [CODE(CSS)@en[[[width]]]]、 [CODE(CSS)@en[[[height]]]] は[[箱]]に適用されるが、どちらも[[内容]]に応じて伸びる。 --- [[奇癖モード]]: [CODE(HTMLe)@en[[[html]]]] の [CODE(CSS)@en[[[overflow]]]]、 [CODE(CSS)@en[[[width]]]]、 [CODE(CSS)@en[[[height]]]] は無視される。 [18] [CITE[IlayerOverflowAttribute - doctype - The ilayer overflow attribute - Project Hosting on Google Code]] ([TIME[2010-03-20 19:47:21 +09:00]] 版) [19] [CITE[Layer]] ([TIME[2005-04-03 06:20:42 +09:00]] 版) [26] [CITE@en[Tantek-Mozilla-projects - MozillaWiki]] ( ([TIME[2011-01-15 07:24:20 +09:00]] 版)) [27] [CITE@en[CSS3 module: Basic User Interface]] ( ([[Tantek Çelik]] 著, [TIME[2002-08-03 07:13:43 +09:00]] 版)) [28] [CITE@ja[floatを解除する方法のまとめ: 小粋空間]] ( ([TIME[2013-03-28 02:27:25 +09:00]] 版)) [29] [CITE@en[CSS Overflow Module Level 3]] ( ([TIME[2013-04-18 17:20:51 +09:00]] 版)) [30] [CITE@ja[overflowではみ出た要素がクリッカブルになってしまうAndroid 4標準ブラウザのバグ - 下林明正のブログ]] ( ([TIME[2013-06-07 09:04:43 +09:00]] 版)) [31] [CITE[CSS basic box model]] ( ([TIME[2013-10-12 15:40:00 +09:00]] 版)) [32] [CITE@en[CSS Overflow Module Level 3]] ( ([TIME[2013-06-03 18:06:00 +09:00]] 版))