[자바스크립트] display 옵션 정리 - display옵션 사용시 테이블 안에 스타일 깨지는 현상

이번에 내부 프로젝트를 수행하며

자바스크립트의 display 옵션을 통해 각 아이템들의 보이기/감추기를 조정할 때에 익스플로러 10버전

까지는 괜찮았으나 11버전에서는 테이블 안의 tr 안의 내용이 깨지는 것을 확인하였습니다.

제가 사용하였던 옵션은 

1	$("#Area").css("display", "block"); 과

2	$("#Area").css("display", "none"); 이었는데,

처음화면에서는 제대로 출력이 되었던 영역이 none 옵션 후 감추고 block옵션으로 다시 보여줬더니 스타일이 깨지더군요.

영역 안에 또 다른 div가 있어서 그 div의 문제일까 라는 생각도 했었고 테이블이다보니 colspan이 제대로 안 먹혔었나해서 계속해서 수정을 했었는데 제대로 구동이 안되더군요.

약간의 구글링을 해보았더니 아래와 같은 팁을 제공해주더랍니다.

1	$("#Area").css("display", "table-row");

바로 ' block ' 옵션을 ' table-row ' 로 옵션으로 변경해줬더니 제대로 먹히더군요.

여러가지 서칭을 해보니 익스플로러 11의 웹표준 지원도(%)가 높아지면서 생긴 문제로 보였습니다.

왜냐하면 크롬에서도 'block'옵션은 동일하게 스타일이 깨졌었거든요.

' table-row ' 옵션을 이용했더니 제대로 출력이 됩니다.

익스플로러가 액티브X도 접고, 점점 웹표준을 지원하는 수준이 높아지는 것을 보니, 이제 마소가 한풀 기가 꺾인 듯한 기분이 들기는 하네요.

그만큼, 다른 오픈 브라우저 진영에서 상당한 선전을 했다는 것도 이유가 되겠지요.

display의 table-row옵션에 대해서 국내에는 포스팅한 분들이 그렇게 많으시지는 않은가봅니다. 서칭해도 몇 건 안나오네요 ㅎㅎ

그 중에 유용한 옵션들을 정리한 분도 계시니, 한번 잘 찾아보세요 ㅎ

============================================================

2014.07.22 추가 

아래 사이트에 display 옵션에 대해 잘 표현이 되어 있습니다. 

참고하시기 바랍니다.

SPEC

Inherited	Initial	Version
NO	INLINE	CSS1, 2, 2.1

BROWSER SUPPORT (more…)

IE8+	FF1+	SA1.3+	OP9.2+	CH2+
FULL	PARTIAL	BUGGY	FULL	BUGGY

Syntax

display: { block | inline | inline-block | inline-table | list-item | run-in | table |table-caption | table-cell | table-column | table-column-group | table-footer-group |table-header-group | table-row | table-row-group | none | inherit } ;

Description

This property controls the type of box an element generates.

The computed value may differ from the specified value for the root element and for floated or absolutely positioned elements; see The Relationship Between display, position, and float for details about the relationship between the display,float, and position properties.

Note that a user agent style sheet may override the initial value of inline for some elements.

Example

The following rule will cause a elements that are descendants of the .menuelement to render as block elements instead of inline elements:

.menu a {
  display: block;
}

Value

block

block makes the element generate a block box.

inline

inline makes the element generate one or more inline boxes.

inline-block

inline-block makes the element generate a block box that’s laid out as if it were an inline box.

inline-table

inline-table makes the element behave like a table that’s laid out as if it were an inline box.

list-item

list-item makes the element generate a principal block box and a list-item inline box for the list marker.

run-in

A value of run-in makes the element generate either a block box or an inline box, depending on the context. If the run-in box doesn’t contain a block box, and is followed by a sibling block box (except a table caption) in the normal flow that isn’t, and doesn’t contain, a run-in box, the run-in box becomes the first inline box of the sibling block box. Otherwise, the run-in box becomes a block box.

table

table makes the element behave like a table.

table-caption

table-caption makes the element behave like a table caption.

table-cell

table-cell makes the element behave like a table cell.

table-column

table-column makes the element behave like a table column.

table-column-group

table-column-group makes the element behave like a table column group.

table-footer-group

table-footer-group makes the element behave like a table footer row group.

table-header-group

table-header-group makes the element behave like a table header row group.

table-row

table-row makes the element behave like a table row.

table-row-group

table-row-group makes the element behave like a table body row group.

none

A value of none makes the element generate no box at all. Descendant boxes cannot generate boxes either, even if their display property is set to something other than none.

Compatibility

INTERNET EXPLORER				FIREFOX					SAFARI				OPERA			CHROME
5.5	6.0	7.0	8.0	1.0	1.5	2.0	3.0	3.5	1.3	2.0	3.1	4.0	9.2	9.5	10.0	2.0
Partial	Partial	Partial	Full	Partial	Partial	Partial	Partial	Partial	Buggy	Buggy	Buggy	Buggy	Full	Full	Full	Buggy

Internet Explorer versions up to and including 7:

• don’t support the values inline-table, run-in, table, table-caption, table-cell,table-column, table-column-group, table-row, and table-row-group
• only support the values table-footer-group and table-header-group for thead andtfoot elements in HTML
• only support the value inline-block for elements that are naturally inline or have been set to inline outside the declaration block.

  To clarify further all you need do to make IE7 and under behave as if they understood inline-block on block level elements is to first declare the element as inline-block and then in a new declaration block also declare the element asinline. Of course the subsequent rule would need to be hidden from browsers other than IE7 and under or they will be converted back to inline. Visit Claire Cambell for more information on this discovery.

• treat block as list-item on li elements in HTML
• will apply a layout to inline-block elements
• don’t support the value inherit

Firefox versions up to and including 2.0, and Opera 9.2 and prior versions:

• only support the value table-column-group for colgroup elements in HTML
• only support the value table-column for col elements in HTML

Firefox versions up to and including 2.0 don’t support the values inline-block,inline-table, or run-in.

Firefox versions 3 and 3.5 don’t support the value run-in

Safari up to and including version 3.1 and Chrome version 1 require elements width a value of table to have the nested element set to table-row in order to render contents correctly (source quirksmode.org). Firefox also suffers from this problem as documented in this long standing bug.

Safari up to and including version 3.0 and Chrome versions 1 and 2 all support the value run-in when it occurs before an element width a value of inline, which is incorrect behaviour (source quirksmode.org).

퍼옴 : http://reference.sitepoint.com/css/display