Compatibility of hidden text during graph text generation

Early Years ~

 

Wedge

In the XX Project, the {text-indent:-9999em;} method is used to hide text for the dot icons. The IE6/7 pieces are lost, as shown below:

Normal Browser:

IE6/7:

For text hiding in this case, we usually use line-height (method 3 mentioned below) instead of seriously considering its advantages and disadvantages, no other tests and comparisons were conducted, so the above problem occurs when text-indent is used. Therefore, we took this opportunity to make a simple test and summary of common text hiding methods.

Simple Description

There are roughly two types of graph text tokens: large images, non-transparent backgrounds, and text to be displayed when images are not loaded, one is that the image is small or the background is transparent, and text is not displayed when the image is not loaded. For the previous one, I usually use the absolute positioning method of the image to cover the text below, and try to set the style of the text to be consistent with that in the image.

Effect after the image is disabled:

This type of controversy is relatively small, and it is not the focus of this discussion. This time we want to test the latter case. OK, let's talk nonsense and start the project.

Test

If the image is small or the background is transparent and the text is not displayed when the image cannot be loaded, or the text cannot be covered in the image, there are three common ways to hide text:

• Font-size mode
• Text-indent Mode
• Line-height mode

Perform the following tests one by one:

Method 1 (font-size) Step 1

Code:

Presentation:

FF, WebKit, opera, IE8/9:

IE6/7:

Note:

After {font-size: 0;} is set, the text in IE6/7 does not disappear, but does exist in the form of 1 pixel.

Step 2

Code:

Presentation:

All of FF, opera, WebKit, IE6-9:

Note:

Set {Line-Height: 0;} to remove the pixels in IE6/7.

Method 2 (text-indent) Step 1

Code:

Presentation:

FF, WebKit, opera, IE8/9:

IE6/7:

The entire <div> content is hidden outside the screen, and the page is blank.

Step 2

Code:

Presentation:

All of FF, opera, WebKit, IE6-9:

Note:

This issue can be fixed when the element is block-level layout. Here, the implementation method is changed from inline-block to float.

Method 3 (line-height)

Code:

Presentation:

All of FF, opera, WebKit, IE6-9:

Note:

This method is better, and there is basically no compatibility problem.

Summary

The three methods are relatively good for individuals to chew on the first and third, and the second method depends on the layout. If someone changes the layout in the future and is unfamiliar with this problem, it may cause a bug.

The above is just a reference, and we look forward to a better way ......

2012.12.5