Resolve compatibility issues with the Position:relative attribute on TD labels in each browser

The Position property in CSS Specifies the positioning type of the page element, which has the following values:

Absolute: Absolute positioning, positioning relative to the first parent element other than static;

Fixed: Generates an absolutely positioned element, positioned relative to the browser window;

Relative: The relative positioning element is generated and positioned relative to its normal position;

Static: Default value, no positioning;

Inherit: Inherits the position value of the parent element;

If a block A is to be absolutely positioned in block B, we can set the position value of block a to absolute and the property value of block B as relative so that block A is absolutely positioned relative to block B.

Recently encountered a problem in the project, a TABLE element in one of the TD will generate a Div, the div relative to the TD for positioning, such as:

The TD's position value is Relative,div position value is absolute. This does not have any problem in Chrome, but in Firefox and IE, there is a problem, such as:

As you can see in the diagram, the outline of the TD element is gone. And if I take the TD element position:relative this style to remove, it can be normal display. Later, the preliminary estimate is that TD elements and DIV elements have inconsistent support and representation of position:relative styles in each browser. The workaround is to set a DIV element inside the TD, which has the position:relative style. Such as:

Then change to the page, you will find this problem solved.

References: Http://www.w3school.com.cn/cssref/pr_class_position.asp and http://blog.csdn.net/netpet/article/details/5223496.

Resolve compatibility issues with the Position:relative attribute on TD labels in each browser