Oxford English Dictionary
遇到一個問題，一個空的DIV，高度會是多少？
<div style="width:150px; background-color:red;"></div>
IE: 高度19px
FF: 0
<div style="width:150px; height:0px; background-color"></div>
IE: 高度19px
FF:0
<div style="width:150px; height:0px; font-size: 0px; background-color"></div>
IE: 高度2px
FF:0
1) Put a comment inside the div: <div style="height: 10px;"><!-- --></div>
2) Put a inside the div and add this to its style: font-size:1px;
line-height:0.
<div style=" width: 150px; font-size:1px; line-height:0; background-color: red ">foo</div>
Tsung's Blog | CSS: 讓圖片蓋在 Flash Player 上面(使用 z-index) - 最近遇到一個一模一樣的問題, 一個z-index比較大的 element 蓋不住 flash, 解法是設定為 wmode="opaque"
針對 <object>/<embed> 的設法:
* 於 <object> 內加 <param name="wmode" value="transparent">, ex: <object>.... <param name="wmode" value="transparent"> ...</object>
* 於 <embed> 內加 wmode="transparent" 參數, ex: <embed wmode="transparent" ....>
針對 AC_RunActiveContent.js 的設法:
* 於 AC_FL_RunContent() 多加 'wmode', 'transparent' 的參數, ex: AC_FL_RunContent(.... 'wmode', 'transparent' ...);
* <noscript> 內, 應該最好也要加如上述 <object>/<embed> 的參數.
The first argument to this method is the element whose computed style is desired. The second argument is any CSS pseudoelement, such as ":before" or ":after" whose style is desired. You probably won't be interested in a pseudoelement, but in the Mozilla and Firefox implementation of this method, the second argument is required and may not be omitted.
var p = document.getElementsByTagName("p")[0]; // Get first paragraph of doc
var typeface = ""; // We want its typeface
if (p.currentStyle) // Try simple IE API first
typeface = p.currentStyle.fontFamily;
else if (window.getComputedStyle) // Otherwise use W3C API
typeface = window.getComputedStyle(p, null).fontFamily;Computed styles are quirky, and querying them does not always provide the information you want. Consider the typeface example just shown. The CSS font-family attribute accepts a comma-separated list of desired font families for cross-platform portability. When you query the fontFamily attribute of a computed style, you're simply getting the value of the most specific font-family style that applies to the element. This may return a value such as "arial,helvetica,sans-serif", which does not tell you which typeface is actually in use. Similarly, if an element is not absolutely positioned, attempting to query its position and size through the top and left properties of its computed style often returns the value "auto". This is a perfectly legal CSS value, but it is probably not what you were looking for.
window.onload = function(){
$('link').onmouseover = function(){
console.log( window.getComputedStyle($('link'), null).color );
}
}the return value will be rgb(255, 0, 0) which is correct.Photo Batching | ThinkVitamin.com
Skinning JS solutions - CSS JavaScript friction and fusion - 這種寫法的好處是
1. 使用者reload不會總是回到第一個tab: 技巧是toc裡面的<a href>帶有#號，自然location.href裡面就有#號，然後在某個tab做reload的話，可以判斷使用者原本在的tab，不會每次都回到第一個tab。
2. click event是 bind 在 toc 裡面，再由 YAHOO.util.event.getTarget(e)去抓取實際點取到的 tab，不需要每個 tab 都 bind 一個 click listener
3. 最後 return pub，只有pub是pub.init是pulic method，其餘的getBookmark, show都是private method
<ul id="toc">
<li><a href="#spec1">Spec 1</a></li>
<li><a href="#spec2">Spec 2</a></li>
<li><a href="#spec3">Spec 3</a></li>
<li><a href="#spec4">Spec 4</a></li>
<li><a href="#spec5">Spec 5</a></li>
</ul>
YAHOO.example.tocnav = function(){
var pub = {};
function show(e){
var t = YAHOO.util.Event.getTarget(e);
if(t.nodeName.toLowerCase()==='a'){
if(pub.current){
YAHOO.util.Dom.removeClass(pub.current,'show');
}
var target = YAHOO.util.Dom.get(t.href.split('#')[1]);
if(target){
pub.current = target.parentNode;
YAHOO.util.Dom.addClass(pub.current,'show');
}
}
};
function getBookmark(){
var bookmark = window.location.hash.replace('#','');
var t = YAHOO.util.Dom.get(bookmark);
return t ? t.parentNode : false;
};
pub.init = function(){
pub.current = getBookmark();
YAHOO.util.Dom.addClass(this,'js');
YAHOO.util.Dom.addClass(pub.current,'show');
YAHOO.util.Event.addListener('toc','click',show);
};
return pub;
}();
YAHOO.util.Event.onAvailable('faq',YAHOO.example.tocnav.init);
ver Y = YAHOO.util;
var $D = Y.Dom;
var $E = Y.Event;
var $ = $D.get;
YAHOO.util.Dom.setStyle(['test', 'test2'], 'opacity', 0.5);
var opacity = YAHOO.util.Dom.getStyle('test2', 'opacity');
/* return 放 public method, 其他private放在return之前 */
YAHOO.MyProperty = function () {
var privateVariable;
function privateFunction(x) {
...privateVariable...
}
return {
firstMethod: function (a, b) {
...privateVariable...
},
secondMethod: function (c) {
...privateFunction()...
}
};
}();
var region = YAHOO.util.Dom.getRegion ( YAHOO.util.Dom.get('test') );
回傳 Region {top: 32, right: 825, bottom: 1334, left: 173}
可用region.top / region.bottom 取得 border-top / border-bottom 的 y 軸座標
region.left / region.right 取得 border-left / border-right 的 x 軸座標
var region = YAHOO.util.Dom.getXY ( YAHOO.util.Dom.get('test') );
YAHOO.util.Event.onAvailable('yui-main',function(){
var reg = YAHOO.util.Dom.getRegion(this.getElementsByTagName('div')[0]);
var height = reg.bottom - reg.top;
var grids = YAHOO.util.Dom.getElementsByClassName('yui-u','div',this);
for(var i=0;grids[i];i++){
YAHOO.util.Dom.setStyle(grids[i],'height',height+'px');
};
});
YAHOO.util.Dom.getDocumentHeight(); // 取得整個document的高
YAHOO.util.Dom.getDocumentWidth();
YAHOO.util.Dom.getViewportHeight()); // 取得可視範圍的高
YAHOO.util.Dom.getViewportWidth());
YAHOO.namespace('foo.bar');
var y = YAHOO.util;
var $E = y.Event;
var $D = y.Dom;
var $ = $D.get;
var $$ = $D.getElementsBy;
YAHOO.foo.bar.example = function(){
return {
init: function(){
$E.on(['test1', 'test2'], 'click', function(){
$D.setStyle(this, 'backgroundColor','red');
$D.setStyle(this, 'opacity', '0.7');
})
}
}
}()
$E.onDOMReady(YAHOO.foo.bar.example.init);
Lorem ipsum dolor sit amet - 太常看到這串字了，特別查了一下，沒想到歷史這麼悠久，還有Firefox addon: Dummy Lipsum，有趣。
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Relatively Absolute @ The Autistic Cuckoo
1. 在position: absolute下，除了IE以外，皆可以藉由同時指定top left bottom right由瀏覽器算出block的長跟寬。
2. 有關 z-index，我一直以為是直接設定element的z-index，應該是要設定containing block的z-index，文末指出的例子值得好好想一想，改天再來做個實驗。
When positioned elements overlap, we can control the stacking order with the
z-index property. The higher the z-index, the closer
to the user the element ends up. Unfortunately this isn't quite as
straightforward as it sounds, since each containing block establishes its own
context for z-index. So to put one element on top of another
element, with a different containing block, you need to increase the
z-index for the first element's containing block. In
really complex layouts you can find yourself in impossible situations, if you
want to stack three elements where the middle one has a different containing
block than the other two. As far as we know, this cannot be done.
Note: Z-index only works on elements that have been positioned (eg position:absolute;)!
Always Show Vertical Scrollbar in Firefox [firefox] [css] [web] - 為什麼要always show vertical scrollbar in Firefox？在IE中，vertical scroll bar 會一直在，不管content的長短，這反而解決了一個問題：在一個置中的欄位中，如果內容太長，Firefox會出現 scrollbar並且佔掉部分的document width，導致置中的欄位移動，畫面不美觀，目前沒有太好的解決辦法，先讓FF的scrollbar一直在吧。
/* always show scrollbar in FF */
html {
overflow: -moz-scrollbars-vertical;
}
/* hide necessary scrollbar for textarea in IE */
* html textarea{
overflow:auto;
}
* -moz-scrollbars-horizontal: Indicates that horizontal scrollbars should always appear and vertical scrollbars should never appear.
* -moz-scrollbars-vertical: Indicates that vertical scrollbars should always appear and horizontal scrollbars should never appear.
* -moz-scrollbars-none: Indicates that no scrollbars should appear but the element should be scrollable from script. (This is the same as hidden, and has been since Mozilla 1.6alpha.)
Adding the following to your CSS file causes Firefox to always show the scroll bar:
Code:
html { min-height: 100%; margin-bottom: 1px; }
The normal operation is for Firefox to remove the scroll bar if it's not needed which can lead to the page shifting left and right slightly between long and short pages.
html {overflow: scroll;} works but it also gives you a horizontal scroll bar.
html {overflow-y: scroll;} will give you just a vertical scroll bar, if that's what you are going for.
IE/win Expanding Box - 這篇討論一個IE的bug，對於一個fixed width的DIV container，裡面的content 如果比 container 還要長的話，guess what? IE會把fixed width的 container 稱大來match 裡面的 content，genius!
W3C standard 規定 overflow 的 default 是 visible，就是過長的內容會跑到 container 外面，可能會蓋到外面的內容。
這個 bug 沒有解法，只有workaround，也就是用word-wrap: break-word;把過長的行斷掉，注意這是 IE only 的 property。所以
<!--[if IE]>
<style type="text/css">
body {word-wrap: break-word;}
</style>
<![endif]-->
Another drawback of the "hidden" method is that IE/win demands that the boxes having this overflow fix must have widths applied to them. So for example, consider a nested paragraph in one of those floated columns above. The floats do have widths but the nested paragraph will normally be left widthless. If the overflow: hidden; trick is used on the paragraph, it will fail in IE/Win. But, if it's used on the surrounding float it will then work properly, because the element with the overflow rule also has a width applied to it.
In summary, both word-wrap: break-word and overflow: hidden are possible workarounds that will make Internet Explorer respect our specified dimensions. The method of overflow: hidden works in more situations -- such as oversized images and vertical expansions, but at the cost of possibly clipped content. The word-wrap: break-word; method won't clip content, but is useless on anything but text. Now that you have seen the effects of both, their possible employment will depend on specific situations and preferences.
只要加一行，讓 IE 五倍速執行 JavaScript ¶ Lvx ex Cælis - 之前不知道在那邊有看到，不明白他的道理，anyway，這一篇解釋的很清楚。
/*@cc_on _d=document;eval('var document=_d')@*/
/*@cc_on
eval((function(props) {
var code = [];
for (var i = 0 l = props.length;i<l;i++){
var prop = props[i];
window['_'+prop]=window[prop];
code.push(prop+'=_'+prop)
}
return 'var '+code.join(',');
})('document self top parent alert setInterval clearInterval setTimeout clearTimeout'.split(' ')));
@*/
