The "Firebug" in Safari[1]
Safari's "Develop" menu allows you to turn on the viewing of JavaScript errors and more. To display the Develop menu in Safari 3.1 or higher, select the checkbox labeled "Show Develop menu in menu bar" in Safari's Advanced Preferences panel.
Safari 1.3 and above supports explicit logging of arbitrary information - similar to Objective-C NSLog() - function by using window.console.log() in your JavaScript. All messages are routed to the JavaScript Console window and show up nicely in a dark green, to easily differentiate themselves from JavaScript exceptions.
if(window.console) {
window.console.log("I think therefore I code!");
}
else {
alert("I think therefore I code!");
}
FF3 vs FF2
div one is outside div two, but div two's width is shorter than one's. FF3 can detect this error and overcome it, but FF2 cannot.
<SELECT> in IE
The select tag in IE cannot apply not the style "z-index".
<table> in Safari
"clear:both" matters in Safari, but not in others.
One IE-only hackfree css
width: 300px;
/* any IE */
width: expression('312px');
/* IE 5.x */
width: expression( document.implementation ? '100%' : '40%' );
/* IE 5.0 only */
width: expression( document.body.contentEditable!='inherit' ? '200px' : null );
/* IE 5.5+ */
width: expression( document.body.contentEditable=='inherit' ? '100%' : null );
/* ad infinitum… */
CSS has to be defined in <head>, otherwise it will not apply.
Here is a chunk of code I wrote to fix this problem:
function loadCSS(){
var numOfStyles=$("link[href$='styles.css']").length;
if(numOfStyles<1){
var oLink = document.createElement("link");
oLink.href = "css/feedit.css";
oLink.rel = "stylesheet";
oLink.type = "text/css";
$('head').append(oLink);
}
return false;
}
The IE hack (html>body) does not work for IE7
Transparent effects in browsers
filter:alpha(opacity=90);
-moz-opacity: 0.9;
opacity:0.9;
The solution to Prototype window crashing IE 7 window.
Add null=null to the URL of the current page.
<form> in Safari
To avoid return key working for a form, the <form> tag should be removed and js could play the submit functionality.
Word wraping in browsers[2]
In Safari,
word-break: break-all;
word-wrap: break-word;
Haven't found CSS solutions in FF, but found a JS function doing word wrap.
function wbr(str, num) {
return str.replace(RegExp("(\\w{" + num + "})(\\w)", "g"), function(all,text,char){
return text + "<wbr>" + char;
});
}
