3

I'm working for a site on which we are forced to support IE7 and above. We apply a CSS reset and then use PIE for CSS3 linear gradients, box shadows, etc. defined in a set of SASS mixins so they can be easily applied to styles without a bunch of browser-specific garbage everywhere.

But what can one do about basic CSS like "inline-block" or ":before/:after"? Is there anything like PIE that I can drop in to get IE7 to respond to CSS1 and 2 properly? Something that will allow me to pretend that IE7 is like any other browser so I can just go on writing code without ugly hacks in the markup?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Joel Wietelmann
  • 1,447
  • 1
  • 9
  • 16

1 Answers1

0

For inline-block http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

For :before and :after you could use jquery for that.. or i found this.. :after and :before css pseudo elements hack for IE 7

And.. I dont think theres a solution for inline-block that doesnt involve css hacks.. unless you wanna go around from using inline-block

On a side note: I dont even recall when I would've had the need to use inline-block, :before and :after

Community
  • 1
  • 1
Joonas
  • 7,227
  • 9
  • 40
  • 65
  • It's not so much a need as a stylistic effort to not allow the design to dictate the markup. We want our markup to be as generic and semantically-correct as possible. In the case of inline-block, it's being used for turning ul/li menus into horizontal menus. In the case of :before and :after, they are for adding style decorations that are of no semantic value – Joel Wietelmann Sep 12 '11 at 15:59
  • @Joel Wietelmann For `list` that is horizontal you can use in the case of `ul` css:`ul li { float: left; }` and that pretty much solves that. I wonder what kind of decorations youre adding with `:before` and `:after` I'll just shoot in the wind and say that most often you can utilise for example the article `p` tags by say applying bg `#content p { padding-bottom: 10px; background: url("images/10px_height_image.png") repeat-x bottom left; }` this would result to depending on the image.. Some sort of line under every `p`. This of course creates a problem of the last p having that line as well.. – Joonas Sep 12 '11 at 18:55
  • ..so, you can either add classes manually to target the first and last `p` or use for example `sizzle.js` to target those values. What I actually do sometimes is use jquery ( which I often use anyhow... ) and add class to first and last elements if I need them targeted http://jsfiddle.net/UrqFF/ that way you can override the values for first and last element and make sure that they dont have that line.. or what ever. And i just shamefully used the same one to make example of making list horizontal http://jsfiddle.net/UrqFF/1/ – Joonas Sep 12 '11 at 19:02
  • Here's I think ..better example of what I was talking about.. of course im not sure if its what you need but still. http://jsfiddle.net/UrqFF/3/ – Joonas Sep 13 '11 at 06:56