Contact Us


FriendFeed FriendFeed


follow us on twitter Twitter


 Rss Feed


Favorites Add to Favorites

Wednesday, June 17, 2009

Web browser hacks, Css hacks - ie, firefox, chrome, safri, Opera

CSS hacks take advantage of browser bugs for hiding CssRules from specific web browsers. Listed below are the hacks for major browsers like ie6, ie7, firefox2, firefox3, Google chrome, safari and opera.

Inline Hack for IE
* (star) can be used as the inline hack for both ie6 and ie7.

For Example:
Syntax: .selector{*property:value;}

IE6 browser inline Hack
_ (underscore) can be using only for ie6

For Example:
Syntax: .selector{_property:value;}

Firefox inline style
content:"\"/*" can be used for firefox only where IE cannot recognize it.

Internal Style
Use * html for ie6 and *+html hack for ie7

For Example:
Synatax: * html .selector{property:value;} , * + html .selector{property:value;}

* html .logo{margin-left:10px;} for ie6
* + html .logo{margin-left:20px;} for ie7

IE7 and Firefox browser Hack
Use html>body hack for ie7 and firefox.

For Example:
Syntax: html>body .selector{property:value;}

html>body .logo{margin-left:10px} will take only in ie7 and firefox

Mordern browser Hack or Firefox Hack
Use html>/**/body {} hack which will support only in both firefox2 and firefox3.

For Example:
Syntax: html>/**/body .selector{property:value;}

html>/**/body .logo{margin-left:10px} will take only in firefox.

Browser hack for Opera versions 9 and below
Use html:first-child {} for opera browser. Also you use
Syntax: @media all and (min-width:0px) {head~body .selector {property:value;}}

For Example:
@media all and (min-width:0px) {head~body .logo {margin-left:10px;}} only for opera

Firefox3 browser hack
Use html>/**/body .selector, x:-moz-any-link, x:default {property:value;} for firfox3 only.

For Example:
Syntax: html>/**/body .pro_yl, x:-moz-any-link, x:default {background:red;}

Google Chrome browser hack
Use body:nth-of-type(1) .elementOrClassName{property:value;} only for google chrome.

For Example:
body:nth-of-type(1) .logo{margin:20px;}

Safari browser hack
Use Syntax: body:first-of-type .elementOrClassName{property:value;}

Fox Example:
body:first-of-type .logo{margin-top:10px;} only for safari.

Hope this information will be useful for you. Please use the browser hacks in a proper manner. For example, you might know double margin bug in ie6. In such case you can use display inline which will render correctly by all the browsers instead of you using ie6 hack seperately.

Labels: , , , , , ,


Anonymous Thomaz Cia said...

The hack for Chrome and Safari is now used to FF v.3.5.2, the new hack i used is:

@media screen and (-webkit-min-device-pixel-ratio:0)
{ #div { properties:value; } }

August 21, 2009 at 12:42:00 PM PDT  
Anonymous Anonymous said...

Thomaz Cia - thanks a lot! Just recently got complaints from FF 3.5 users, and now it's got fixed. Thanks!

August 31, 2009 at 4:24:00 AM PDT  
Anonymous Angel said...

Is there any hack only for Chrome or only for Safari not for both ot them, because I can't find solution that separate this browsers?

September 17, 2009 at 4:47:00 AM PDT  
Blogger crvadivel said...

hi i need comman css for all browser using div tag

September 18, 2009 at 4:27:00 AM PDT  
Blogger naresh said...

any hack for chrome should not detect by safari

September 21, 2009 at 12:14:00 AM PDT  
Anonymous Anonymous said...

Chrome :-

#mainNav li { margin:0 34px 0 0; }

@media screen and (-webkit-min-device-pixel-ratio:0) { /* hacked for chrome and safari */
#mainNav li { margin:0 26px 0 0; }

November 28, 2009 at 2:20:00 AM PST  
Anonymous Anonymous said...

thanks but i use chrome hack it work but don't work in firefox

December 9, 2009 at 4:39:00 AM PST  
Anonymous Anonymous said...

the hack for chrome also works in firefox. it overrides the hack meant for firefox. is there one that is only for chrome and only for firefox??

December 13, 2009 at 9:32:00 PM PST  
Anonymous Anonymous said...

Use body:nth-of-type(1) .elementOrClassName{property:value;} only for google chrome.
Worked for me. Thankz...

December 21, 2009 at 5:37:00 AM PST  
Anonymous Anonymous said...

cool post, like it. keep writing...

January 28, 2010 at 9:53:00 PM PST  
Anonymous Anonymous said...

Hamid said: that is very usefull Hacks for all browsers

February 3, 2010 at 12:28:00 AM PST  
Anonymous Anonymous said...

Inline Hack for IE doesn't work with ie8 :/

February 16, 2010 at 1:50:00 AM PST  
Blogger Randdot said...

Thomaz Cia-Nice hack, Chrome and Safari was being bothersome this morning all of a sudden. Thanks

February 24, 2010 at 7:47:00 AM PST  
Anonymous Anonymous said...

It is possible to target specific browsers in external .css file.
#middle {
font-size: .8em; //Opera all
* font-size: .7em; //IE6
//font-size: .7em; //IE 7, 8

/* FF only all*/
@-moz-document url-prefix() {
#middle {{font-size: .6em;}}

/* Safari all */
@media screen and (-webkit-min-device-pixel-ratio:0){
#middle{font-size: .6em;}}

!!! Keep order - and browsers never willl override code. Code is checked & proven many times. If browser doesn`t render code at once - you have to wait some time.
Professional webdesigner.

April 25, 2010 at 3:26:00 AM PDT  
Anonymous ryuzakispb said...

Mordern browser Hack or Firefox Hack
Use html>/**/body {} hack which will support only in both firefox2 and firefox3.

Unfortunately, this one affects IE8 too now

April 28, 2010 at 2:12:00 AM PDT  
Anonymous Anonymous said...

Opacity Hack:

#myElement {
opacity: .4; /* other browsers */
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* this works in IE6, IE7, and IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* this works in IE8 only */

May 4, 2010 at 5:22:00 AM PDT  
Anonymous Anonymous said...

This is great!!!! Thank you very very much!!!

May 7, 2010 at 7:32:00 AM PDT  
Anonymous Anonymous said...

Hack for ie8:

width:10px\0/; only for ie8

May 17, 2010 at 12:26:00 AM PDT  
Anonymous Anonymous said...

I've looking for this hack "width:10px\0/;" it helps me a lot thanks.

May 27, 2010 at 10:57:00 AM PDT  
Anonymous Anonymous said...

thanks for the post.

great info

July 14, 2010 at 4:08:00 AM PDT  
Blogger Nils said...

I tried many of the Chrome specific hacks but the only one that worked for me (without affecting FF) was this one:
@media screen and (-webkit-min-device-pixel-ratio:0) { /* hacked for chrome and safari */
#mainNav li { margin:0 26px 0 0; }
It also affects Safari but, since they use the same rendering engine, it should work out just right. It did for me.

August 3, 2010 at 11:37:00 AM PDT  
Blogger Anbalagan said...

Thanks a lot......... Keep writing.......

August 5, 2010 at 12:11:00 AM PDT  
Blogger Manoj K Mishra said...

Sorry but, I Think your Firefox hack is not working.

could you please mail me at ( with Firefox hack example

August 11, 2010 at 2:27:00 AM PDT  
Anonymous Rock Jason said...

There is no fix for google chrome,just manage the css properly.
Chrome and firefox are almost same.

August 11, 2010 at 5:30:00 AM PDT  
Anonymous Anonymous said...

"just manage the css properly" - What does that mean exactly?

August 12, 2010 at 12:35:00 AM PDT  
Anonymous Haroon said...


October 22, 2010 at 12:03:00 AM PDT  
Anonymous Anonymous said...

thanks but how to fix css in Google chrome?

January 31, 2011 at 1:19:00 AM PST  
Anonymous jay said...

U r ma time saver buddy... :)

April 21, 2011 at 11:04:00 AM PDT  
Anonymous Anonymous said...

all are good buddies

June 4, 2011 at 3:08:00 AM PDT  
Blogger sweety said...

Thanks a lot for useful writing..

July 5, 2011 at 9:26:00 PM PDT  
Blogger Anthonytonyboy said...

Not help much, but can fix little my blog, only I need code for IE, Firefox, Opera, Chrome. :D Thank.

July 27, 2011 at 10:43:00 AM PDT  
Anonymous Anonymous said...

i look for firefox 4+ hack please help

August 12, 2011 at 11:45:00 AM PDT  
Blogger A.R.Kichenaradjou said...

Thks, fixed CSS problem in google chrome

September 28, 2011 at 4:37:00 AM PDT  
Anonymous Anonymous said...

It seems to be very interesting about web browser hacks.U have made best post.Thanks for sharing !

web design company

October 14, 2011 at 1:51:00 AM PDT  
Blogger vishnu agrawal said...

this blog is very good,

October 22, 2011 at 7:56:00 PM PDT  
Anonymous varsha singh said...

thanks for solving my query.

October 23, 2011 at 1:33:00 AM PDT  
Anonymous Anonymous said...

thanks a lot ... you rock...

December 13, 2011 at 5:12:00 AM PST  
Anonymous Anonymous said...


December 22, 2011 at 10:40:00 AM PST  
Anonymous Anonymous said...

Good Blog..

January 16, 2012 at 11:27:00 PM PST  
Anonymous Frederik said...

wonderfull list of hacks. thx

January 23, 2012 at 6:49:00 AM PST  
Blogger pramodadwivedi said...

Awesome Hacks site...:)

January 30, 2012 at 12:16:00 AM PST  
Anonymous Anonymous said...

In regards to CSS, I am developing a website on a MAC OS operating system and when I view Chrome it looks fine, but when I view it on a PC via Chrome the CSS is off, any suggestions?

March 12, 2012 at 9:57:00 AM PDT  
Anonymous abc said...

nice blog

June 28, 2012 at 5:40:00 AM PDT  
Blogger Amber Stotelmyer said...

Thanks for your post, you're a life saver! I'm one of the few people in my office who's really good with CSS, and everyone thinks I can solve everything lol. BTW, if anyone is still having problems targeting FireFox, I found the following hack to be useful:

@-moz-document url-prefix()
text-align: right;

October 26, 2012 at 12:04:00 PM PDT  
Anonymous Anonymous said...

"Browser hack for Opera versions 9 and below
Use html:first-child {} for opera browser. Also you use
Syntax: @media all and (min-width:0px) {head~body .selector {property:value;}}

For Example:
@media all and (min-width:0px) {head~body .logo {margin-left:10px;}} only for opera"

toda essa parte o safari reconheçe e fica dando comflito com o opera.

November 20, 2012 at 3:54:00 PM PST  
Blogger sam said...

There is obviously a lot to know about this. I think you made some good points in Features also

January 22, 2013 at 4:12:00 AM PST  
Blogger gexhouse2 said...

This comment has been removed by a blog administrator.

July 1, 2013 at 4:54:00 AM PDT  
Blogger Rakesh Panwar said...

that's is very helpful thank you so much

February 5, 2014 at 10:46:00 PM PST  
Blogger Omega software said...

This post is very helpful, edifying and in addition cool thoughts on the topic. It's very encouraging to find this site, can't wait to check out new stuff you post. CMS website development company || Web Designing || Website Development

January 7, 2015 at 11:58:00 PM PST  
Blogger Omega software said...

Nice information, many thanks to the author. It is incomprehensible to me now, but in general, the usefulness and significance is overwhelming. Thanks again and good luck. Website Development in Mumbai || CMS Website Developer || Website Maintenance in Mumbai

January 7, 2015 at 11:59:00 PM PST  
Anonymous P.Gersöne said...

Many thanks for this helpful and extensive collection

March 25, 2015 at 5:10:00 PM PDT  
Blogger Albert Andrada said...

Really Nice Information,Thank You Very Much For Sharing.
Wordpress Development Company

May 6, 2015 at 6:52:00 AM PDT  
Blogger Timo said...

Very nice read. Thank you very much.
Webdesign Agentur Hamburg

June 26, 2015 at 8:58:00 AM PDT  
Blogger Dinh Ha said...

đồng tâm
game mu
cho thuê nhà trọ
cho thuê phòng trọ
nhac san cuc manh
số điện thoại tư vấn pháp luật miễn phí
văn phòng luật
tổng đài tư vấn pháp luật
dịch vụ thành lập công ty trọn gói
lý thuyết trò chơi trong kinh tế học
đức phật và nàng audio
hồ sơ mật dinh độc lập audio
đừng hoang tưởng về biển lớn ebook
chiến thắng trò chơi cuộc sống ebook
bước nhảy lượng tử
ngồi khóc trên cây audio
truy tìm ký ức audio
mặt dày tâm đen audio
thế giới như tôi thấy ebook

“Ghét quá đi, phu quân, chàng thật giống đại sắc lang.” Ân Tố Tố mắng yêu hắn.

Lưu Phong trong lúc nhất thời xém chút nữa đã lộ nguyên hình, hắn cũng không muốn phá hủy đi hình tượng trong lòng nàng, đang muốn sửa chữa thì Ân Tố Tố nói tiếp: “Phu quân, cô cô còn nói nam nhân ai cũng như ai, nữ nhân chúng ta nhất định phải khổ luyện hai tuyệt kỹ, đó là nấu cơm và chuyện …kia.”

Cao thủ thật. Ân quý phi quả nhiên là cao thủ, chinh phục nam nhân phải vừa chinh phục trái tim, vừa chinh phục tiểu đệ đệ của nam nhân đó. Đó mới chính là Vương đạo.

Uống xong chén thuốc, Lưu Phong lập tức cáo từ. Ân Tố Tố có chút quyến luyến, không muốn xa hắn, cầm tay hắn nói: “Phu quân, chàng phải thường xuyên đến ghé thăm thiếp nhé. Nhớ kỹ không được ra ngoài câu dẫn nữ nhân khác đó.”

Lưu Phong gật đầu, mỉm cười nói: “Quai lão bà, ta tuyệt đối sẽ không câu dẫn nữ nhân khác.” Nói là thế nhưng trong lòng lại nghĩ, mình không câu dẫn đàn bà khác nhưng nếu như nữ nhân quyến rũ mình thì hì hì…xem như không tính.

”Quai lão bà, nếu nàng lo lắng như vậy thì theo ta về Phượng viên sống đi.” Chưa kết hôn nhưng chung sống với nhau tại kiếp trước cũng không có gì là lạ lắm, thậm chí ngay tại trường cao trung cũng đã có hiện tượng này.

Ân Tố Tố lắc đầu: “Phu quân, cha nói cô cô đã thuyết phục hoàng thượng tổ chức hôn lễ cho chúng ta, trước khi thành hôn không thể ở chung được.”

October 27, 2015 at 6:25:00 AM PDT  
Blogger Kristi Byrd said...

Many thanks intended for unveiling an extremely great and also helpful web site.
Customer Support Page

February 18, 2016 at 8:51:00 PM PST  
Blogger Sanjay Singh said...

Detecvision is one of the best and professional web development companies in India providing best and Affordable web development services in Delhi, India.

March 2, 2016 at 4:01:00 AM PST  
Blogger Patrick Co Eban said...

Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer Node js Training in Chennai . learn from or Javascript Online Training from India. Nowadays JavaScript has tons of job opportunities on various vertical industry. JavaScript Training in Chennai

April 10, 2018 at 6:26:00 AM PDT  
Blogger tamizh said...

I appreciate that you produced this wonderful article to help us get more knowledge about this topic.
I know, it is not an easy task to write such a big article in one day, I've tried that and I've failed. But, here you are, trying the big task and finishing it off and getting good comments and ratings. That is one hell of a job done!

Selenium training in bangalore
Selenium training in Chennai
Selenium training in Bangalore
Selenium training in Pune
Selenium Online training

January 31, 2019 at 10:39:00 PM PST  
Blogger kavithasathish said...

This is an awesome blog for the people who are really seeking information for this technology.
TOEFL Coaching in Chennai
TOEFL Center in Chennai
Best Spoken English Classes in Chennai
French Language Classes in Chennai
pearson vue exam centers in chennai
German Classes in Chennai
IELTS Coaching in Tnagar
IELTS Coaching in OMR

May 5, 2019 at 10:56:00 PM PDT  
Blogger Chris Hemsworth said...

The article is so informative. This is more helpful for our
software testing training and placement
selenium testing training in chennai. Thanks for sharing

June 24, 2019 at 12:06:00 AM PDT  
Blogger Unknown said...

Nice article.
For AWS Training in bangalore,visit:
AWS Training in bangalore

August 22, 2019 at 12:21:00 AM PDT  

Post a Comment

Subscribe to Post Comments [Atom]

<< Home