I've been looking around StackOverflow and even else where to find if display: inline-flex; works in IE9. I posted a question before this when I had trouble with expanding a width dynamically, question here.
The answer helped me out, thank you who ever you are! Now that I've fixed the issue and it works fine in Chrome, Opera, Mozilla, Safari, IE10+, I still have trouble making this work in IE9.
I've also tried to add pre-fix for display: inline-flex; such as display: -webkit-inline-box, -ms-inline-flexbox, and so on.
The problem I had which fixed the whole deal was width: auto; and display: inline-flex;
Working fiddle here
How can I make this to work in IE9?
As you can see here: Can I use FlexBox? Flexbox is not supported in IE9
EDIT : Based on OP comment to answer:
if there's any way to make it work in IE9, with prefix or something?
here is a SO users' answer from another related question:
I understand from your question, that you are aware of the fact that
IE9 does not support flexbox.
A polyfill for flexbox, named flexie.js,
does exist (not maintained afaik), but it works using the old 2009
syntax of flexbox.
Using the old syntax is of course not recommended,
since the 2009 syntax is really outdated and many browsers won't
recognize it anymore. But, you can try to use Autoprefixer, which
transforms new-syntax rules to old-syntax rules (while preserving the
new-syntax for browsers that do support it).
There are caveats - You won't be able to use inline-style, you would have to write your styles in CSS files, and I don't think it supports dynamic changes to the
DOM.
Disclaimer: I haven't tried that method with IE9 + flexie.
Related
My page has a display issue on pageload with Safari (display inline-block element has a width of 0, after one JS inline style its fine). I can fix the issue with this extra style for my span element:
display: inline-block; //standard for all browsers
display: -webkit-inline-box; //safari fix
I have to use at first the standard and after that my fix. On the current browser versions it looks good for FF, IE 9-11, Chrome and Safari (Desktop Mac).
My question is now: Is the order fine or can i get with some browsers a problem?
(Maybe browsers think: "Oh I have to make the inline element (span) to display:inline-block". And with the next line "Oh I dont know that property (-webket-inline-flex), so I use the standard display: inline".)
Hopefully you know what I mean? :)
The order is fine, however you will find that any browser which supports -webkit-inline-box will use this over inline-block. This may cause issues as the way the browser-prefixed version is implemented may not reflect how the non-browser-prefixed version is implemented.
For instance, Google Chrome supports -webkit-inline-box and will use this instead of inline-block. Off the top of my head webkit-inline-box is based on the old out-dated version of the Flexbox specification.
Perhaps a better solution would be to work out why Safari is giving your inline-block element a width of 0. This isn't behaviour I've witnessed myself, but Safari usually falls outside of the production browsers I test in.
is it possible to Workaround for display:inline-flex in IE 9
<div style="display:inline-flex"> Test </div>
I understand from your question, that you are aware of the fact that IE9 does not support flexbox.
A polyfill for flexbox, named flexie.js, does exist (not maintained afaik), but it works using the old 2009 syntax of flexbox.
Using the old syntax is of course not recommended, since the 2009 syntax is really outdated and many browsers won't recognize it anymore. But, you can try to use Autoprefixer, which transforms new-syntax rules to old-syntax rules (while preserving the new-syntax for browsers that do support it).
There are caveats - You won't be able to use inline-style, you would have to write your styles in CSS files, and I don't think it supports dynamic changes to the DOM.
Disclaimer: I haven't tried that method with IE9 + flexie.
I want to apply a gridding system to my project, but the resource I got was applicable only to IE8-10, the grid doesn't work fine on other browsers.
I want the grid to display efficiently on Chrome, Opera, and Firefox(Cross-browser).
This the css code:
body{
-ms-grid-columns: ;
-ms-grid-rows: ;
}
body{
display: -ms-grid;
}
How can I do this?
This has already been answered on Stack Overflow here.
The correct answer is by thirtydot on there. to paraphrase to bring that answer up-to-date and more relevant to your specific question:
Grid Layout has very poor support - the declarations you're using that start -ms are Microsoft vendor-specific and not supported by other browsers.
Webkit (the engine behind Chrome and Safari) has been working on an implementation as seen here but it's still incomplete and uses slightly-different syntax:
.gridWithFixed {
display: -webkit-grid;
-webkit-grid-columns: 7px 11px;
-webkit-grid-rows: 17px 2px;
}
So, right now there isn't a way of implementing your CSS in a way that will work outside of nightly browser builds and IE10.
As an alternative, Flexbox has decent support (including IE10). So, the best you can do is use Flexbox instead.
css3 support cross-browser/platform is quite pathetic at the moment.
flexbox is an option, although with its limited support, # least in legacy browsers, it's not a knockout. this depends on what you are supporting: how many browsers, browser versions, user agents, etc.? are there a lot of legacy or "non-modern" browsers in that list? then i would avoid flexbox.
i would use 960gs or unsemantic, cross-browser grid layout libraries. unsemantic is the successor, but they are both versatile, and very light-weight.
What is the use of this CSS hack in Safari?
/* CSS Hack Safari */
#dummy {;# }
I found it in this page:
http://jscroller2.markusbordihn.de/example/endless/
After doing some Googling, I was able to find something pertaining to Safari and browser hacks..
Apparently, older versions of Safari would ignore CSS declarations that were preceded by a hashtags. For instance:
h1 {
font-size:24px;
font-size:30px;#
}
If Safari were to come across something similar to this, it would make h1 24px, and completely ignore the 30px.. However, say IE, or Chrome were to see this, they would read the declaration and make the fontsize 30px because of the fact that they don't take the hashtag into consideration. To my knowledge this little 'hack' no longer works on newer versions of Safari.. Here is my reference.
Now back to the question:
#dummy {;#}
This doesn't particularly do anything, so I don't really see why this was in their code.
However, I am assuming that something was originally placed in there, and later removed due to the fact that this hack no longer works..
This is a rather interesting source on browser hacks..
I'm new in this area and I wrote a div style which didn't work properly for firefox 4, opera 11.1 and for ie 8.0 but worked for chrome 11. The code which was a style for a div was the following only with a different order
#info_text
{
background:#fdf6cc;
width: 650px;
margin-left:1px;
padding-left: 30px;
padding-right: 263;
min-height: 90px;
}
After changing it this way it worked for all the browsers except for the Internet Explorer 8.0.
Can I do something to make it work or it's the problem of the browser?
Does it metter the order in this case?
The order doesn't matter in this case.
You are missing units for the padding-right property. Running your code through a validator will flag errors like this.
Welcome to world of web development! All browsers interpret CSS differently, particular old versions of IE (try the above in IE6 for some fun!)
To understand exactly what problems you're having we need to see a working web page with the above.
The order of the CSS doesn't particularly matter to be honest, though obviously later CSS overrides earlier CSS and this something which is used commonly in the industry.
try opening "developer options" under "tools" in ie, if there is a more specific class, it may be overwriting something, or if something is formatted poorly, IE may be excluding it all together. Another option is "firebug lite", firebug is a very useful tool for getting started with css, javascript, and page structure. Without a link to the page that you are having the problem on, it's very hard to determine the cause, I copied your css and tried it myself, but got the expected result in all browsers