When trying to target an image based on it's width attribute value it works in all versions of IE except version 7.
Example here: http://jsfiddle.net/mGcE5/
Anyone got the same experience or explanation?
IE7 have buggy support for this selectors: [attr], +, :first-child (but stable for .class1.class2, > and ~)
So if you want stable support for this selector in IE7 -> the only way to use same jQuery selector
Related
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Are CSS3 ::before and ::after pseudo elements supported by IE9 or not?
I have a wordpress page set up here. It does use tables, which I know is dumb, but it was the best way to set up the visual layout in the backend as well, so the client could see what they're doing when they edit.
ANYHOO, I have a separator image that displays after each table row, using "tr::after" css. This looks fine in any browser EXCEPT for Internet Explorer, where instead of showing up below the table row, the separator seems to scrunch the second column and squeeze beside it (image)
I can't seem to figure out what's going on here.
IE 8+ supports the :after pseudo-element - note the single colon (:)
according to the above link no IE version (though IE 10 is not in this list) supports the two-colon pseudo element
edit:
IE 9+ supports the two-colon pseudo-element (as #BoltClock mentions Are CSS3 ::before and ::after pseudo elements supported by IE9 or not?)
You're only using the CSS3 syntax which was created to distinguish pseudo-elements from pseudo-classes like :hover and :focus. While the later target states of an element, ::after targets pseudo-elements following the target.
Internet Explorer 8, like other browsers, supports the CSS2 version. Support for the CSS3 syntax wasn't added until Internet Explorer 9. If you want full compatibility, you can provide both, or provide the former CSS2 syntax within an IE8 comment.
The MSDN Documentation states the following:
In Windows Internet Explorer 8, as well as later versions of Windows Internet Explorer in IE8 Standards mode, only the one-colon form of this pseudo-element is recognized—that is, :after.
Chained pseudo-selectors do not seem to work in IE8 on Windows XP. Is there any documentation about this?
I'm developing a website using Selectivizr in order to use CSS3 selectors, but a style such as this doesn't work in IE8, whereas it works everywhere else (unsurprisingly):
span:last-child:after {content: "foobar";}
This is not a bug, it's due to the fact the the selector doesn't match natively.
A simple selector is either a type selector or universal selector followed immediately by zero or more attribute selectors, ID selectors, or pseudo-classes, in any order. The simple selector matches if all of its components match.
The simple selector in this case is either span:first-child, which matches natively in IE8, or span:last-child, which does not.
One pseudo-element may be appended to the last simple selector in a chain, in which case the style information applies to a subpart of each subject.
Appending :after to span:first-child is a match, while appending it to span:last-child is not, and since Selectivizr is a post-processor, it comes too late to save the day. Perhaps a pre-processor would have better luck.
Im having some trouble targeting my buttons in ie7. Doesnt this work with an html5 doctype?
input[type="button"] { color: red; }
only
input { color: red; }
works, but thats not really what im after...
Thanks
Edit: this is a native ie7 problem. ie7-mode works in ie9.
Try to use <button></button> instead of <input type="button" />. You then will be able to use element selector (BUTTON) instead of attribute selector (INPUT[type="button"]).
And, just in case, of course, you cannot select BUTTON elements with INPUT[type="button"] selector, and vice versa.
Note: IE7 and IE8 support attribute selectors only if a !DOCTYPE is specified. Attribute selection is NOT supported in IE6 and lower.
http://www.w3schools.com/css/css_attribute_selectors.asp
The attribute selector input[type=button] is a component of CSS level 2.1, the HTML-type (whether 4.x, or 5) is more or less irrelevant. However the most important factor is that implementation depends on the browser, and its level of CSS compliance/support.
Specifically, according to Quirksmode, the 'advanced attribute selectors' are not implemented by IE < 7 (which doesn't really address your difficulty in this case).
In my own implementations I've occasionally found issues when quoting the value of the attribute-value, usually fixed by amending the selector to, in this case: input[type=button], but I've performed no objective tests to validate this approach and is based purely on memory.
References:
CSS 2.1 selectors.
Doesnt this work with an html5 doctype?
A doctype may prevent/allow something to work, but it won't implement something which isn't already inherently supported by the browser. I think that's what you meant; just clarifying.
IE7 does support such selectors: CSS Selector for <input type="?"
As far as I know, every CSS selector works with the HTML 5 doctype (assuming there are no overriding factors, such as compatibility mode).
I can confirm that (at least in IE9) attribute selectors still work in compatibility view. However, forcing quirks mode defeats attribute selectors (and causes general anarchy on a well-structured page).
Does anyone know which browsers/version support them?
Is it safe to use them, or should I resort to PHP / javascript to generate first/last classes?
:first-child and :last-child, along with complimentary compatibility chart.
:first-child is supported IE9 properly, and IE7 and IE8 sort of (see chart).
:last-child is supported by IE9+ only.
Both of them are supported well by the good browsers.
"Can I use..." should be your go to resource for these types of questions. Here's are the compatibility tables:
first-child - http://caniuse.com/#feat=css-sel2
last-child - http://caniuse.com/#feat=css-sel3
Here's a nice table illustrating different browser support.
Does anyone know why this CSS selector works in Firefox but not in IE7 or IE8?
css=div[style~='visible;'] div[class~='x-combo-list-item']:contains('Test Job')
I'm using this in a Selenium test to find an element on the page.
Edit: The :contains selector is not the problem. I'm using it elsewhere in my tests and it works in IE6, 7, and 8.
I know that Selenium attempts to support all of CSS3 for all browsers in it's selector engine. It may be that it does not support multiple levels of the attribute selectors in IE.
You might be stuck with an XPath "locator" this one
Alternatively, you could try:
div[style~='visible'] .x-combo-list-item:contains('Test Job')
Probably because the :contains pseduo-class is a CSS3 addition and whatever version of IE you're using (you didn't specify) probably doesn't support :contains.
http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#selectors