Skip to content

Instantly share code, notes, and snippets.

@fmal

fmal/inline-block.css

Created June 8, 2013 18:27
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save fmal/5736116 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save fmal/5736116 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
inline-block.css
.inline-block-container {
letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
*letter-spacing: normal; /* reset IE < 8 */
*word-spacing: -0.43em; /* IE < 8: collapse white-space between units */
text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */
}
/* Opera as of 12 on Windows needs word-spacing.
* The ".opera-only" selector is used to prevent actual prefocus styling
* and is not required in markup.
*/
.opera-only :-o-prefocus, /* this hack affect also IE7 */
.inline-block-container {
word-spacing: -0.43em;
}
.inline-block {
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: top;
letter-spacing: normal;
word-spacing: normal;
text-rendering: auto;
}
Raw
jsbin-demo.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Cross-browser CSS inline block</title>
<link rel="stylesheet" href="//cdn.jsdelivr.net/normalize/1.1.0/normalize.css">
<!-- CSS -->
<style>
.inline-block-container {
letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
*letter-spacing: normal; /* reset IE < 8 */
*word-spacing: -0.43em; /* IE < 8: collapse white-space between units */
text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */
}
/* Opera as of 12 on Windows needs word-spacing.
* The ".opera-only" selector is used to prevent actual prefocus styling
* and is not required in markup.
*/
.opera-only :-o-prefocus, /* this hack affect also IE7 */
.inline-block-container {
word-spacing: -0.43em;
}
.inline-block {
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: top;
letter-spacing: normal;
word-spacing: normal;
text-rendering: auto;
}
body {
max-width: 940px;
padding: 0 20px;
margin: auto;
}
.menu {
margin: 0;
padding: 0;
list-style: none;
list-style-image: none;
}
.menu li {
display: inline;
}
.menu a {
background: green;
color: #fff;
padding: .7em;
text-decoration: none;
}
.menu a:hover {
background: #000;
color: #fff;
text-decoration: none
}
</style>
</head>
<body>
<h1>Cross-browser CSS inline-block</h1>
<h2>Menu</h2>
<ul class="menu inline-block-container">
<li><a href="#" class="inline-block">Home</a></li>
<li><a href="#" class="inline-block">Works</a></li>
<li><a href="#" class="inline-block">About</a></li>
<li><a href="#" class="inline-block">Contact</a></li>
</ul>
<pre><code>
HTML ===============
&lt;ul class=&quot;menu inline-block-container&quot;&gt;
&lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;inline-block&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;inline-block&quot;&gt;Works&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;inline-block&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;inline-block&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
CSS ================
.inline-block-container {
letter-spacing: -0.31em;
*letter-spacing: normal;
*word-spacing: -0.43em;
text-rendering: optimizespeed;
}
.opera-only :-o-prefocus,
.inline-block-container {
word-spacing: -0.43em;
}
.inline-block {
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: top;
letter-spacing: normal;
word-spacing: normal;
text-rendering: auto;
}
.menu {
margin: 0;
padding: 0;
list-style: none;
list-style-image: none;
}
.menu li {
display: inline;
}
.menu a {
background: green;
color: #fff;
padding: .7em;
text-decoration: none;
}
.menu a:hover {
background: #000;
color: #fff;
text-decoration: none
}
</pre></code>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment