Related
I'm setting image width based on conditional comments as follows.
<o:conditionalComment if="lte IE 9">
<style>
.image-width {
width: 210px;
}
</style>
</o:conditionalComment>
<o:conditionalComment if="!IE">
<style>
.image-width {
width: 216px;
}
</style>
</o:conditionalComment>
It works on Internet Explorer (8). IE 8 sets the image width to 210px. The image width on other browsers however, should be set to 216px. The last conditional comment i.e !IE does not function on other browsers (Chrome and FF).
How to apply the width: 216px; style on browsers other than IE?
The generated HTML code appears to be correct as follows.
<!--[if lte IE 9]>
<style>
.image-width {
width: 210px;
}
</style><![endif]-->
<!--[if !IE]>
<style>
.image-width {
width: 216px;
}
</style><![endif]-->
The !IE is somewhat an extreme conditonal comment condition. It's namely utterly useless.
Basically, every browser ignores everything inside comments <!-- ... -->. IE is the only browser which actually interprets the content of comments matching <!--[if ...]> ... <![endif]-->. Note that other browsers don't interpret them and still treat them like <!-- ... -->.
When you use !IE, then IE browser won't interpret the comment's content. But other non-IE browsers also not, for the very simple reason that they don't support conditional comments. In effects, the comment is not being parsed by any browser. It has exactly the same effect as <!-- ... -->. The only feasible reason why !IE condition exists is that Microsoft assumed that "other" browsers would in some future support conditional comments as well (this was after all a severe misassumption; even more, the support for conditional comments is removed since IE10).
In order to achieve your concrete functional requirement, you'd better swap the two style declarations and make the main one non-conditional. In CSS, the latter declared one has higher precedence.
<style>
.image-width {
width: 216px;
}
</style>
<o:conditionalComment if="lte IE 9">
<style>
.image-width {
width: 210px;
}
</style>
</o:conditionalComment>
Simple as that. Even IE understands that.
By the way, you'd better use <h:outputStylesheet> resp. <link> elements instead.
Here is a simple code sample from a language switch in HTML. The CSS should separate the span elements and display a dot in between:
<html>
<head>
<style type="text/css">
.languageSwitch span:before {
content: "•";
padding: 0 4px;
font-weight: normal;
}
.languageSwitch span:first-child:before {
content: "";
padding: 0;
}
.languageSwitch .current {
font-weight: bold;
}
</style>
</head>
<body>
<div class="languageSwitch">
<span>Deutsch</span>
<span class="current">English</span>
<span>français</span>
</div>
</body>
</html>
This works fine in Firefox, but Internet Explorer 9¹ simply ignores the :before directive. In the “developers tools” CSS dialog the “content” property does not show up either. I have searched all over the web: There are pseudo-element issues IE 8, but IE 9 should know them, and this is “old” CSS 2.
Does someone have a clue why this fails (bug in IE 9?) or how the syntax must look like?
1) To be clear: Version 9.0.8112.16421 / “Updateversion” 9.0.6 (KB2675157)
Check the doctype. On jsfiddle, this works fine in IE9: http://jsfiddle.net/4nGW9/. IE8 should handle this as well.
I can see the dots fine in IE 9. Exact version as yours. Only difference in my code is a valid HTML5 doctype at the top.
Without a valid doctype IE could be switching its rendering for your page to quirks mode, or a rendering mode for IE8/IE7 which would not handle the pseudo selectors like first-child or generated content.
See your page here in browserling.
Using conditional comments it is easy to target Internet Explorer with browser-specific CSS rules:
<!--[if IE 6]>
...include IE6-specific stylesheet here...
<![endif]-->
Sometimes it is the Gecko engine (Firefox) that misbehaves. What would be best way to target only Firefox with your CSS rules and not a single other browser? That is, not only should Internet Explorer ignore the Firefox-only rules, but also WebKit and Opera should.
Note: I'm looking for a 'clean' solution. Using a JavaScript browser sniffer to add a 'firefox' class to my HTML does not qualify as clean in my opinion. I would rather like to see something that depends on browser capabilities, much like conditional comments are only 'special' to IE…
This solution does not rely on JavaScript being turned on.
#-moz-document url-prefix() {
h1 {
color: red;
}
}
<h1>This should be red in FF</h1>
It's based on yet another Mozilla specific CSS-extension. There's a whole list of these CSS extensions right here:
Mozilla CSS Extensions. ⚠ Do note that they are mostly deprecated!
For more information about this specif CSS-extension, see this question: What does #-moz-document url-prefix() do?
Updated(from #Antoine comment)
You can use #supports
#supports (-moz-appearance:none) {
h1 { color:red; }
}
<h1>This should be red in FF</h1>
More on #supports here
Here is how to tackle three different browsers: IE, FF and Chrome
<style type='text/css'>
/*This will work for chrome */
#categoryBackNextButtons
{
width:490px;
}
/*This will work for firefox*/
#-moz-document url-prefix() {
#categoryBackNextButtons{
width:486px;
}
}
</style>
<!--[if IE]>
<style type='text/css'>
/*This will work for IE*/
#categoryBackNextButtons
{
width:486px;
}
</style>
<![endif]-->
Here is some browser hacks for targeting only the Firefox browser,
Using selector hacks.
_:-moz-tree-row(hover), .selector {}
JavaScript Hacks
var isFF = !!window.sidebar;
var isFF = 'MozAppearance' in document.documentElement.style;
var isFF = !!navigator.userAgent.match(/firefox/i);
Media Query Hacks
This is gonna work on, Firefox 3.6 and Later
#media screen and (-moz-images-in-menus:0) {}
If you need more information,Please visit browserhacks
First of all, a disclaimer. I don't really advocate for the solution I present below. The only browser specific CSS I write is for IE (especially IE6), although I wish it wasn't the case.
Now, the solution. You asked it to be elegant so I don't know how elegant is it but it's sure going to target Gecko platforms only.
The trick is only working when JavaScript is enabled and makes use of Mozilla bindings (XBL), which are heavily used internally in Firefox and all other Gecko-based products. For a comparison, this is like the behavior CSS property in IE, but much more powerful.
Three files are involved in my solution:
ff.html: the file to style
ff.xml: the file containg the Gecko bindings
ff.css: Firefox specific styling
ff.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
-moz-binding: url(ff.xml#load-mozilla-css);
}
</style>
</head>
<body>
<h1>This should be red in FF</h1>
</body>
</html>
ff.xml
<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl">
<binding id="load-mozilla-css">
<implementation>
<constructor>
<![CDATA[
var link = document.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", "ff.css");
document.getElementsByTagName("head")[0]
.appendChild(link);
]]>
</constructor>
</implementation>
</binding>
</bindings>
ff.css
h1 {
color: red;
}
Update:
The above solution is not that good. It would be better if instead of appending a new LINK element it will add that "firefox" class on the BODY element. And it's possible, just by replacing the above JS with the following:
this.className += " firefox";
The solution is inspired by Dean Edwards' moz-behaviors.
Using -engine specific rules ensures effective browser targeting.
<style type="text/css">
//Other browsers
color : black;
//Webkit (Chrome, Safari)
#media screen and (-webkit-min-device-pixel-ratio:0) {
color:green;
}
//Firefox
#media screen and (-moz-images-in-menus:0) {
color:orange;
}
</style>
//Internet Explorer
<!--[if IE]>
<style type='text/css'>
color:blue;
</style>
<![endif]-->
Now that Firefox Quantum 57 is out with substantial — and potentially breaking — improvements to Gecko collectively known as Stylo or Quantum CSS, you may find yourself in a situation where you have to distinguish between legacy versions of Firefox and Firefox Quantum.
From my answer here:
You can use #supports with a calc(0s) expression in conjunction with #-moz-document to test for Stylo — Gecko does not support time values in calc() expressions but Stylo does:
#-moz-document url-prefix() {
#supports (animation: calc(0s)) {
/* Stylo */
}
}
Here's a proof-of-concept:
body::before {
content: 'Not Fx';
}
#-moz-document url-prefix() {
body::before {
content: 'Fx legacy';
}
#supports (animation: calc(0s)) {
body::before {
content: 'Fx Quantum';
}
}
}
Targeting legacy versions of Firefox is a little tricky — if you're only interested in versions that support #supports, which is Fx 22 and up, #supports not (animation: calc(0s)) is all you need:
#-moz-document url-prefix() {
#supports not (animation: calc(0s)) {
/* Gecko */
}
}
... but if you need to support even older versions, you'll need to make use of the cascade, as demonstrated in the proof-of-concept above.
A variation on your idea is to have a server-side USER-AGENT detector that will figure out what style sheet to attach to the page. This way you can have a firefox.css, ie.css, opera.css, etc.
You can accomplish a similar thing in Javascript itself, although you may not regard it as clean.
I have done a similar thing by having a default.css which includes all common styles and then specific style sheets are added to override, or enhance the defaults.
The only way to do this is via various CSS hacks, which will make your page much more likely to fail on the next browser updates. If anything, it will be LESS safe than using a js-browser sniffer.
with -moz prefix
div:-moz-read-only {
background: green;
}
textarea:-moz-read-write {
background: green;
}
:-moz-any(div#foo) div.bar {
background: green;
}
li:-moz-first-node, li:-moz-last-node {
background: green;
}
CSS support can be used from JavaScript.
if (CSS.supports("( -moz-user-select:unset )")) {
console.log("FIREFOX!!!")
}
https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions
The following code tends to throw Style lint warnings:
#-moz-document url-prefix() {
h1 {
color: red;
}
}
Instead using
#-moz-document url-prefix('') {
h1 {
color: red;
}
}
Helped me out! Got the solution for style lint warning from here
How to Apply CSS to Only Firefox
This solution below offers you decent Firefox-only CSS support in a wider range of Firefox browser versions...
#supports (-moz-appearance:button) and (contain:paint) {
body {
background: red;
}
}
-moz-appearance:button was supported in Mozilla/Firefox as early as 2006. But the #supports rule was not supported till 2019 so that would be the earliest Firefox browser supporting this rule. contain:paint excludes Safari browsers from the rule. Internet Explorer and early Trident Edge browsers do not support #supports so also excluded from seeing the CSS rule. No known Chrome browser should support -moz-appearance:button, so excluded.
As always, all my CSS solutions are 100% JavaScript-free :)
This question already has answers here:
Detecting IE version using CSS Capability/Feature Detection
(18 answers)
Closed 5 months ago.
To target elements only in IE browsers i'll use
IE6:
* html #nav li ul {
left: -39px !important;
border: 1px solid red;
}
IE7:
*+html #nav li ul {
left: -39px! important;
}
Does anyone know how to target IE8?
I'm not going to get in a debate about whether or not this method should be used, but this will let you set specific css attributes for IE8-9 only (note: it is not a selector, so a bit different than what you asked):
Use '\0/' after each css declaration, so:
#nav li ul {
left: -39px\0/ !important;
}
And to build off another answer, you can do this to assign variou styles to IE6, IE7, and IE8:
#nav li ul {
*left: -7px !important; /* IE 7 (IE6 also uses this, so put it first) */
_left: -6px !important; /* IE 6 */
left: -8px\0/ !important; /* IE 8-9 */
}
source:
http://dimox.net/personal-css-hacks-for-ie6-ie7-ie8/
2013 update: IE10+ no longer supports conditional comments.
Original answer:
Some people seem to be confused because this does not answer the letter of the question, only the spirit - so for clarification:
There is no such thing as a browser selector. There are hacks that take advantage of bugs and/or glitches in specific browsers' CSS parsers, but relying on these are setting yourself up for failure. There is a standard, accepted way to deal with this:
Use conditional comments to target IE only.
Example:
<!--[if gte IE 8]>
<style>
(your style here)
</style>
<![endif]-->
Everything inside the two <!--> will be ignored by all non-IE browsers as a comment, and IE versions that are less than IE8 will skip it. Only IE8 and greater will process it. 2013 update: IE10+ will also ignore it as a comment.
Take a look at these:
/* IE8 Standards-Mode Only */
.test { color /*\**/: blue\9 }
/* All IE versions, including IE8 Standards Mode */
.test { color: blue\9 }
(Source: David Bloom’s CSS hack for IE8 Standards Mode)
you can use like this.
it's better than
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="css/ie7.css" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen" href="css/ie6.css" /><![endif]-->
-------------------------------------------------------------
<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie8"> <![endif]-->
<!--[if !IE]>--> <body> <!--<![endif]-->
div.foo { color: inherit;}
.ie7 div.foo { color: #ff8000; }
This question is ancient but..
Right after the opening body tag..
<!--[if gte IE 8]>
<div id="IE8Body">
<![endif]-->
Right before the closing body tag..
<!--[if gte IE 8]>
</div>
<![endif]-->
CSS..
#IE8Body #nav li ul {}
You could do this for all IE browsers using conditional statements, OR target ALL browsers by encapsulating all content in a div with browser name + version server-side
CSS style only for IE8:
.divLogRight{color:Blue; color:Red\9; *color:Blue;}
Only IE8 will be Red.
first Blue: for all browsers.
Red: IE6,7,8 Only
Second Blue: IE6,7 Only
So Red = for IE8 only.
For a very complete summary of browser hacks (including Internet Explorer (IE), Safari, Chrome, iPhone, and Opera) visit this link:
http://paulirish.com/2009/browser-specific-css-hacks/
Building upon image72's excellent answer, you could actually have advanced CSS selectors like this:
<!--[if lt IE 7]><body class="IE IE7down IE8down IE9down IE10down"><![endif]-->
<!--[if IE 7]><body class="IE IE7 IE7down IE8down IE9down IE10down IE7up"><![endif]-->
<!--[if IE 8]><body class="IE IE8 IE8down IE9down IE10down IE7up IE8up"><![endif]-->
<!--[if IE 9]><body class="IE IE9 IE9down IE10down IE7up IE8up IE9up"><![endif]-->
<!--[if gte IE 10]><body class="IE IE10 IE10down IE7up IE8up IE9up IE10up"><![endif]-->
<!--[if !IE]>--><body class="notIE"><!--<![endif]-->
so that in your css you can do this:
.notIE .foo { color: blue; } /* Target all browsers except IE */
.IE9up .foo { color: green; } /* Taget IE equal or greater than 9 */
.IE8 .foo { color: orange; } /* Taget IE 8 only */
.IE7down .foo { color: red; } /* Target IE equal or less than 7 */
.IE8 .foo, .IE9 .foo {
font-size: 1.2em; /* Target IE8 & IE9 only */
}
.bar { background-color: gray; } /* Applies to all browsers, as usual */
/* Maybe show a message only to IE users? */
.notIE #betterBrowser { display: none; } /* Any browser except IE */
.IE #betterBrowser { display: block; } /* All versions of IE */
This is great because:
It's perfectly standards compliant (no ugly/dangerous css hacks)
No need to have separate stylesheets
You can easily target any version of IE as well as complex combinations
In the ASP.NET world, I've tended to use the built-in BrowserCaps feature to write out a set of classes onto the body tag that enable you to target any combination of browser and platform.
So in pre-render, I would run something like this code (assuming you give your tag an ID and make it runat the server):
HtmlGenericControl _body = (HtmlGenericControl)this.FindControl("pageBody");
_body.Attributes.Add("class", Request.Browser.Platform + " " + Request.Browser.Browser + Request.Browser.MajorVersion);
This code enables you to then target a specific browser in your CSS like this:
.IE8 #nav ul li { .... }
.IE7 #nav ul li { .... }
.MacPPC.Firefox #nav ul li { .... }
We create a sub-class of System.Web.UI.MasterPage and make sure all of our master pages inherit from our specialised MasterPage so that every page gets these classes added on for free.
If you're not in an ASP.NET environment, you could use jQuery which has a browser plugin that dynamically adds similar class names on page-load.
This method has the benefit of removing conditional comments from your markup, and also of keeping both your main styles and your browser-specific styles in roughly the same place in your CSS files. It also means your CSS is more future-proof (since it doesn't rely on bugs that may be fixed) and helps your CSS code make much more sense since you only have to see
.IE8 #container { .... }
Instead of
* html #container { .... }
or worse!
I have a solution that I use only when I have to, after I build my html & css valid and working in most browsers, I do the occasional hack with this amazing piece of javascript from Rafael Lima. http://rafael.adm.br/css_browser_selector/
It keeps my CSS & HTML valid and clean, I know it's not the ideal solution, using javascript to fix hacks, but as long as your code is originally as close as possible (silly IE just breaks things sometimes) then moving something a few px with javascript isn't as big of a deal as some people think. Plus for time/cost reasons is a quick & easy fix.
In the light of the evolving thread, see below for a more complete answer:
IE 6
* html .ie6 {property:value;}
or
.ie6 { _property:value;}
IE 7
*+html .ie7 {property:value;}
or
*:first-child+html .ie7 {property:value;}
IE 6 and 7
#media screen\9 {
.ie67 {property:value;}
}
or
.ie67 { *property:value;}
or
.ie67 { #property:value;}
IE 6, 7 and 8
#media \0screen\,screen\9 {
.ie678 {property:value;}
}
IE 8
html>/**/body .ie8 {property:value;}
or
#media \0screen {
.ie8 {property:value;}
}
IE 8 Standards Mode Only
.ie8 { property /*\**/: value\9 }
IE 8,9 and 10
#media screen\0 {
.ie8910 {property:value;}
}
IE 9 only
#media screen and (min-width:0) and (min-resolution: .001dpcm) {
// IE9 CSS
.ie9{property:value;}
}
IE 9 and above
#media screen and (min-width:0) and (min-resolution: +72dpi) {
// IE9+ CSS
.ie9up{property:value;}
}
IE 9 and 10
#media screen and (min-width:0) {
.ie910{property:value;}
}
IE 10 only
_:-ms-lang(x), .ie10 { property:value\9; }
IE 10 and above
_:-ms-lang(x), .ie10up { property:value; }
or
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.ie10up{property:value;}
}
IE 11 (and above..)
_:-ms-fullscreen, :root .ie11up { property:value; }
Javascript alternatives
Modernizr
Modernizr runs quickly on page load to detect features; it then
creates a JavaScript object with the results, and adds classes to the
html element
User agent selection
The Javascript:
var b = document.documentElement;
b.setAttribute('data-useragent', navigator.userAgent);
b.setAttribute('data-platform', navigator.platform );
b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');
Adds (e.g) the below to the html element:
data-useragent='Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)'
data-platform='Win32'
Allowing very targetted CSS selectors, e.g.:
html[data-useragent*='Chrome/13.0'] .nav{
background:url(img/radial_grad.png) center bottom no-repeat;
}
Footnote
If possible, avoid browser targeting. Identify and fix any issue(s) you identify. Support progressive enhancement and graceful degradation. With that in mind, this is an 'ideal world' scenario not always obtainable in a production environment, as such- the above should help provide some good options.
Attribution / Essential Reading
Keith Clarke
Paul Irish
Web Devout
The Spanner
I realize this is an old question but it was the first result on Google when I searched and I think I have found a better solution than the highest ranked suggestion and what the OP chose to do.
#nav li ul:not(.stupidIE) { color:red }
So technically this is the opposite of what the OP wanted, but that just means you have to apply the rule you want for IE8 first and then apply this for everything else. Of course you can put anything inside the () as long as it is valid css that doesn't actually select anything. IE8 chokes on this line and doesn't apply it, but previous IEs (ok I only checked IE7, I have stopped caring about IE6), just ignore the :not() and do apply the declarations. And of course every other browser (I tested Safari 5, Opera 10.5, Firefox 3.6) applies that css as you would expect.
So this solution, I guess like any other pure CSS solution would assume that if the IE developers add support for the :not selector then they will also fix what ever discrepancy was causing you to target IE8.
OK so, it isn't css hack, but out of frustration for not being able to find ways to target ie8 from css, and due to policy of not having ie specific css files, I had to do following, which I assume someone else might find useful:
if (jQuery.browser.version==8.0) {
$(results).css({
'left':'23px',
'top':'-253px'
});
}
\9 doesn’t work with font-family, instead you’d need to use “\0/ !important” as Chris mentioned above, for example:
p { font-family: Arial \0/ !important; }
There aren't any selector hacks for IE8. The best resource for this issue is http://browserhacks.com/#ie
If you want to target specific IE8 you should do comment in html
<!--[if IE 8]> Internet Explorer 8 <![endif]-->
or you could use attribute hacks like:
/* IE6, IE7, IE8, but also IE9 in some cases :( */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE8, IE9 */
#anotherone {color: blue\0/;} /* must go at the END of all rules */
For more info on this one check: http://www.paulirish.com/2009/browser-specific-css-hacks/
So I just love it when my application is working great in Firefox, but then I open it in IE and... Nope, please try again.
The issue I'm having is that I'm setting a CSS display property to either none or table-cell with JavaScript.
I was initially using display: block, but Firefox was rendering it weird without the table-cell property.
I would love to do this without adding a hack in the JavaScript to test for IE. Any suggestions?
Thanks.
I've solved this using jQuery:
$(document).ready(function(){
if ($.browser.msie && $.browser.version == 7)
{
$(".tablecell").wrap("<td />");
$(".tablerow").wrap("<tr />");
$(".table").wrapInner("<table />");
}
});
the above script assumes you have divs using style such as:
<style>
.table { display: table; }
.tablerow { display: table-row; }
.tablecell { display: table-cell; }
</style>
A good way of solving this setting the display value to '':
<script type="text/javascript">
<!--
function toggle( elemntId ) {
if (document.getElementById( elemntId ).style.display != 'none') {
document.getElementById( elemntId ).style.display = 'none';
} else {
document.getElementById( elemntId ).style.display = '';
}
return true;
}
//-->
</script>
The empty value causes the style to revert back to it's default value. This solution works across all major browsers.
I had the same issue and used
*float: left;
"*" indicates IE only
Well, IE7 does not have display: table(-cell/-row) so you will have to figure something else out or do browser targeting (which I agree, is bad hack). As a quick fix (I don't know what you're trying to achieve, appearance-wise) you could try display: inline-block and see what it looks like.
Maybe figure out a way to do display: block and solve the problem of "Firefox rendering it weird" instead? Can you describe what you mean by the weird rendering exactly?
You never need Javascript to test for IE, use conditional comments.
You might look at the solution these guys came up with for handling table-like display in IE.
Using inline-block works well for this type of stuff. No, IE 6 and IE 7 technically do not have display: inline-block, but you can replicate the behavior with the following styles:
div.show-ib {
display: inline-block;
*zoom: 1;
*display: inline;
}
The key to this is 'zoom: 1' toggles the 'hasLayout' property on the element which changes the way the browser renders a block level element. The only gotcha with inline block is you cannot have a margin of less than 4px.
I've been using CSS for over a decade and I've never had occasion to use display:table-cell, and the only times I ever use conditional comments are to hide advanced effects from IE6.
I suspect that a different approach would solve your problem in an intrinsically cross-browser way. Can you open a separate question that describes the effect you're trying to achieve, and post the HTML and CSS that's currently working in Firefox?
A code example fot the conditional comments that user eyelidlessness, kindly posted
"[if lt IE 8]" only works if the browser is IE lower than IE8 because IE8 does it right. With the conditional comments IE7 arranges the DIVs nicely horizontally...
HTML:
<div class="container">
<!--[if lt IE 8 ]><table><tr><![endif]-->
<!--[if lt IE 8 ]><td><![endif]-->
<div class="link">English</div>
<!--[if lt IE 8 ]></td><![endif]-->
<!--[if lt IE 8 ]><td><![endif]-->
<div tabindex="0" class="thumb"><img src="pictures\pic.jpg" /></div>
<!--[if lt IE 8 ]></td><![endif]-->
<!--[if lt IE 8 ]><td><![endif]-->
<div class="link">Deutsch</div>
<!--[if lt IE 8 ]></td><![endif]-->
<!--[if lt IE 8 ]></tr></table><![endif]-->
</div>
My CSS
.link {
display:table-cell;
vertical-align:middle;
}
div.container {
margin: 0 auto;
display:table;
}
.thumb {
display:table-cell;
float: left;
text-align: center;
}
IE 8 and 9 Work with the CSS as does FireFox. IE7 looks now the same using the Table and TD & TR tags. On some pages IE 8 worked only 20% of the time, so I used [if lt IE 9 ]
This also helps smoothing out vertical-align issues that IE7 can't handle.
I tried everything and the only way I found that was all cross browser was to use Javascript / Jquery. This is a clean lightweight solution: click here
IE7 doesn't support display:inline-block; either. An apparent hack is zoom: 1; *display: inline; after your css for display:table-cell;