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;}
.logo{*margin-left:10px;}

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

For Example:
Syntax: .selector{_property:value;}
.logo{_margin-left:10px;}

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: , , , , , ,

78 Comments:

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 Ascend Design Media 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.
Example:
#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:

.test{
width:10px;
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 Mishra said...

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

could you please mail me at (mkmishra19@gmail.com) 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...

thanks.....

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...

thanks

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 Pramod Dubey 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 AnonEMus 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()
{
.editSelfUsernameEmail
{
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 Unknown said...

that's is very helpful thank you so much

February 5, 2014 at 10:46: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 Timo said...

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

June 26, 2015 at 8:58:00 AM PDT  
Blogger Unknown 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 Unknown 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 Unknown 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 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 Tech Guy said...

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

August 22, 2019 at 12:21:00 AM PDT  
Blogger Softgen Infotech said...

Very interesting, good job and thanks for sharing such a good blog. your article is so convincing that I never stop myself to say something about it. You’re doing a great job. Keep it up…

Softgen Infotech is the Best Oracle Training institute located in BTM Layout, Bangalore providing quality training with Realtime Trainers and 100% Job Assistance.

December 3, 2019 at 9:18:00 PM PST  
Blogger Rihi said...

Check Best ecommerce development company
Best Seo Services in Chennai, India
Top Digital Marketing services for your online Business
top web design company in Chennai
top-notch mobile app development company in chennai
Best UI/UX Designing services
eCommerce website design in chennai
web development company India

February 28, 2020 at 2:15:00 AM PST  
Anonymous Anonymous said...

Mobile app development company
https://www.hakunamatatatech.com/our-services/enterprise-mobile-app-development/

March 27, 2020 at 9:09:00 AM PDT  
Blogger Keerthi SK said...

i have been following this website blog for the past month. i really found this website was helped me a lot and every thing which was shared here was so informative and useful. again once i appreciate their effort they are making and keep going on.

Digital Marketing Consultant in Chennai

Freelance Digital Marketing Consultant

April 4, 2020 at 10:21:00 AM PDT  
Anonymous Anonymous said...

Thanks for sharing such a great blog
hadoop training in bangalore | hadoop online training
iot training in bangalore | iot online training
devops training in banaglore | devops online training

August 30, 2020 at 9:36:00 PM PDT  
Blogger Kanika said...

Good Post! , it was so good to read and useful to improve my knowledge as an updated one, keep blogging. After seeing your article I want to say that also a well-written article with some very good information which is very useful for the readers....thanks for sharing it and do share more posts like this.
AWS Online Training
Online AWS Certification Training

October 16, 2020 at 12:07:00 PM PDT  
Blogger Pathway for German Language said...

This comment has been removed by the author.

December 16, 2020 at 12:42:00 AM PST  
Blogger Digitial - the digital and social media marketing agency said...

This is most informative and also this post most user-friendly and super navigation to all posts.
TechData Solution
Data Science Course In Pune

January 11, 2021 at 6:52:00 AM PST  
Blogger Techi Top said...

thanks for sharing this information.
techitop
pdfdrive
jio rockers telugu
www.mpl.live
filmy4wap.xyz

June 8, 2021 at 11:58:00 PM PDT  
Anonymous Anonymous said...

mmorpg oyunlar
instagram takipçi satın al
tiktok jeton hilesi
tiktok jeton hilesi
antalya saç ekimi
referans kimliği nedir
instagram takipçi satın al
mt2 pvp serverler
instagram takipçi satın al

May 1, 2022 at 7:53:00 PM PDT  
Anonymous Anonymous said...

smm panel
SMM PANEL
iş ilanları
instagram takipçi satın al
hirdavatciburada.com
Www.beyazesyateknikservisi.com.tr
servis
Tiktok Jeton Hilesi İndir

May 26, 2022 at 4:58:00 PM PDT  
Anonymous Anonymous said...

مهندس افران بالمدينة المنورة
فني اصلاح افران

December 26, 2022 at 5:28:00 AM PST  
Anonymous kibris bahis siteleri said...

Good text Write good content success. Thank you
bonus veren siteler
betmatik
kralbet
mobil ödeme bahis
slot siteleri
tipobet
poker siteleri
betpark

December 30, 2022 at 8:19:00 PM PST  
Anonymous wytres said...

sms onay
VOİ0O

February 6, 2023 at 9:38:00 AM PST  
Anonymous senol said...

betmatik
kralbet
betpark
mobil ödeme bahis
tipobet
slot siteleri
kibris bahis siteleri
poker siteleri
bonus veren siteler
2M5Q

March 21, 2023 at 4:07:00 PM PDT  
Anonymous burak said...

kocaeli
konya
kuşadası
kütahya
malatya
BHD6R

July 9, 2023 at 12:10:00 PM PDT  
Anonymous gamze said...

manisa
maraş
mardin
marmaris
mersin
LHB7RK

July 9, 2023 at 3:47:00 PM PDT  
Anonymous ilkin said...

erzurum
kuşadası
ümraniye
beşiktaş
ataşehir
34D

July 22, 2023 at 12:40:00 PM PDT  
Anonymous kemal said...

beşiktaş
eyüpsultan
gebze
kaş
tekirdağ

BHN3Y7

July 23, 2023 at 11:20:00 AM PDT  
Anonymous cansel said...

ağrı
aksaray
amasya
antep
ardahan
LA3ZL

September 6, 2023 at 4:35:00 AM PDT  
Anonymous derya said...

kaş
beykoz
bahçeşehir
pendik
tekirdağ
TQ47

September 16, 2023 at 12:51:00 AM PDT  
Anonymous Anonymous said...

دهان سيليكات
عازل اسمنتي للسطح

December 7, 2023 at 1:42:00 AM PST  
Blogger Documentation in Python code is crucial for ensuring readability, maintainability, and collaboration within a project. Here are some best practices for effective Python code documentation@ www.nearlea said...

https://trainingwithinindustry.blogspot.com/2009/04/job-breakdown-sheet-vs-work-instruction.html?sc=1726815526392#c8896387777301264583

September 19, 2024 at 11:59:00 PM PDT  

Post a Comment

Subscribe to Post Comments [Atom]

<< Home