Compass Inline Block

Provides a cross-browser method to implement display: inline-block;. Note that this was actually introduced in CSS2, but badly implemented across browsers. See CSS2.1 spec: display.

This value causes an element to generate a block box, which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an inline replaced element.

This file can be imported using: @import "compass/css3/inline-block"

Examples

Inline-block: css3 mixin for inline-block

Imports

Browser Support – Provides configuration options for the Compass Browser Support Matrix.

Configurable Variables help

$inline-block-support-threshold `$graceful-usage-threshold`

The legacy support for inline-block. Defaults to the $graceful-usage-threshold.

$inline-block-alignment `middle`

Set $inline-block-alignment to none or false to disable the output of a vertical-align property in the inline-block mixin. Or set it to a legal value for vertical-align to change the default.

Mixins

view source

inline-block($alignment, $ie-alignment)

=inline-block($alignment: $inline-block-alignment, $ie-alignment: auto)
  // legacy support for VERY old firefox
  @if support-legacy-browser("firefox", "2", $threshold: $inline-block-support-threshold)
    display: -moz-inline-stack
  // standard
  display: inline-block
  @if $alignment and $alignment != none
    vertical-align: $alignment
  // legacy IE support
  @if support-legacy-browser("ie", "7", $threshold: $inline-block-support-threshold)
    @if $ie-alignment and $ie-alignment != none
      *vertical-align: $ie-alignment
    *zoom: 1
    *display: inline

@mixin inline-block($alignment: $inline-block-alignment, $ie-alignment: auto) {
  // legacy support for VERY old firefox
  @if support-legacy-browser("firefox", "2", $threshold: $inline-block-support-threshold) {
    display: -moz-inline-stack;
  }
  // standard
  display: inline-block;
  @if $alignment and $alignment != none {
    vertical-align: $alignment;
  }
  // legacy IE support
  @if support-legacy-browser("ie", "7", $threshold: $inline-block-support-threshold) {
    @if $ie-alignment and $ie-alignment != none {
      *vertical-align: $ie-alignment;
    }
    *zoom: 1;
    *display: inline;
  }
}

Provides a cross-browser method to implement display: inline-block;