Browser
From ThaiiS Note (Wiki)
Contents |
:Web_browser_usage_share
http://en.wikipedia.org/wiki/File:Web_browser_usage_share.svg http://www.w3counter.com/globalstats.php
Cross Browser Testing
Browser visible area
ขอบเขตของ Browser ที่เป็นที่นิยมในปัจจุบัน ใช้สำหรับตรวจสอบขอบเขตในงานออกแบบ web ซึ่ง Capture จาก Broswer จริงโดยการติดตั้ง Browser ด้วย Virtual PC เหมาะสำหรับผู้ใช้ Ilustrator ในการออกแบบ หากใช้Photoshop ต้องตรวจให้แน่ใจว่า Place เข้าไปสัดส่วนถูกต้องไม่ถูกย่อขนาด ซึ่ง ใน photoshop ควรตั้งความละเอียดงานออกแบบ 72 dpi และมีพื้นที่งานใหญ่กว่าขนาดหน้าจอ browser ที่จะ place เข้าไป
That good for web designer, we capture from virture pc usefull if you design on illustrator
Fire Fox 3.5
IE 7 บน XP
IE 8 บน Windows 7
SAFARI 4 บน XP
Relate
good Links
browsersize.googlelabs.com
firefox
English Menu
- install http://releases.mozilla.org/pub/mozilla.org/firefox/releases/your version/win32/xpi/en-GB.xpi
- Address bar type about:config
- general.useragent.locale change frome th to en-GB
3.6
- http://hacks.mozilla.org/category/css/
- http://hacks.mozilla.org/demos/
- https://developer.mozilla.org/en/Firefox_3.6_for_developers
- http://hacks.mozilla.org/2010/02/an-html5-offline-image-editor-and-uploader-application/
- http://www.getpersonas.com/en-US/persona/2296
chrome
IE
Internet Explorer Application Compatibility VPC Image
Virtual PC 2007
Windows XP Mode
- http://www.microsoft.com/windows/products/winfamily/virtualpc/default.mspx
- http://www.microsoft.com/windows/virtual-pc/download.aspx
relate
css fix
*html #id{}
*html .class{}
Good Links
- http://www.virtuosimedia.com/tutorials/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs
- http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/
<!--[if lt IE 6]>
<style type="text/css">
#news {width:250px}
</style>
<![endif]-->
<!--[if lt IE 6]> <link rel="stylesheet" type="text/css" href="/css/ie5.css"> <![endif]-->
#news {
padding:10px;
border:1px solid;
width:250px;
w\idth:228px;
}
Setting Div Height in IE6
height of 5px. If I set this very large, like 100px IE displays it ok, but at a small height, like 5px, it just stops shrinking. If you set font-size and line-height for that div so that they fit within the 5px, IE will probably display it as desired. Another option is
overflow:hidden
Rendering Mode Control
All of this magic happens with a simple little meta tag:
<meta http-equiv="X-UA-Compatible" content="|" />
(Where | represents one of the modes below)
- IE=5
<meta http-equiv="X-UA-Compatible" content="IE=5" />
This forces IE 8 to render the page in “Quirks” mode.
- IE=7
<meta http-equiv="X-UA-Compatible" content="IE=7" />
This forces IE 8 to render the page using IE 7 Strict mode.
- IE=EmulateIE7
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
This forces IE 8 to use the !DOCTYPE declaration in the page to determine the rendering mode.
- IE=8
<meta http-equiv="X-UA-Compatible" content="IE=8" />
This forces IE 8 to display the page in Internet Explorer Standards mode.
- IE=EmulateIE8
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
This forces IE 8 to use the !DOCTYPE declaration in the page to determine the rendering mode.
- IE=edge
<meta http-equiv="X-UA-Compatible" content="edge" />
This forces Internet Explorer 8 to render in the most recent mode. For instance; currently this would behave like using a value of IE=8, but when IE 9 is available that will be the mode that IE=edge will render in.