List-style-image has been used many times before, but it is inconsistent in different browsers, especially alignment.
Debugging one by one today is still rewarding.
First, we can find some problems from the simplest and most primitive ones --
Code:
<Title> list and Background Image Positioning </title>
<Style type = "text/CSS">
Ul {list-style: none; padding: 0; margin: 0; margin-left: 50px ;}
Ul Li {list-style-image: URL (../image/li_point.gif); font-size: 12px; List-style-position: Outside ;}
</Style>
</Head>
<Body>
<Ul>
<Li> I am an apple </LI>
<Li> I am a lychee. </LI>
<Li> I am a watermelon </LI>
<Li> I am a grape </LI>
<Li> I am a peach </LI>
</Ul>
</Body>
URL (../image/li_point.gif) is a black dot image of 3px * 3px.
This code is displayed in various browsers as follows:
After careful observation, we can find that in IE6 and IE7, the position of the "point" background image is relatively higher, while that of Firefox and chrome is relatively lower.
This is what the title says about non-alignment. How can we solve this problem? Don't worry, just step by step.
Modify the CSS Code as follows:
<Style type = "text/CSS">
Ul {list-style: none; padding: 0; margin: 0; margin-left: 50px ;}
Ul Li {list-style-image: URL (../image/li_point.gif); font-size: 12px; List-style-position: Outside; Height: 16px ;}
</Style>
Set a height: 16 PX (the height here varies with the font. If the font is Arial, the height increases accordingly. For English ), the result is as follows in each browser (because IE6 and IE7 are consistent, Firefox and chrome are consistent, so only I6 and Firefox are shown here ):
After careful observation, we will find that the position of the Black Point in IE6 moves down relative to the text. Now it is basically aligned with the vertical midline of the text, but the position of the lower point and text in Firefox remains unchanged. In my understanding, the Li background and text in IE are separated by two quantities, at least for the positional relationship, the position of the background image under List-style-image (I personally think) is the position starting from 40% to the top of the Li height. When the Li height increases, the actual distance between the background image (the black spot here) under List-style-image and the edge on the Li label will increase with the increase of the Li height, however, the text in Li is top-aligned by default, and its vertical position starts at the position of 0% above the Li height. No matter how high the Li is, its distance from the edge on the Li label remains unchanged, there must be a suitable Li height to align the background image with the text in the midline, which requires you to set your own debugging. For Firefox (including chrome), the position and text of the background image under List-style-image seem to be the whole. The relative text of the two is fixed, regardless of the Li height, the padding, line-height, and point are not changed. Is there a solution for this problem? No.
Now let's try another Li background image-an image with a height of 7px. To intuitively display the changes, I made a GIF animation as follows, which is for IE and Firefox:
I wonder if you have noticed the difference between the two animations. in IE, The 7px height image (orange triangle) replaces the original 3px height when the Black Point is centered, the vertical midline of the two images is the same, while in Firefox, the image is replaced by the base, and the bottom line of the front and back images is highly consistent.
Therefore, we can make a rough summary. For the use of list-style-image to display the Li background image, the relative position of the background image and text in IE is only related to the Li height, the height of Firefox is related to the image height. Now you can breathe a sigh of relief, as long as you pay attention to the height of the background image when making, after controlling the height of Li, you can solve the problem of displaying the Li background image and text using list-style-image. In fact, the above replacement of 3px height with 7px height is a good solution to this problem. Show the static diagram just now:
If the requirement is high, we recommend that you use an image with a height of 8 PX or 9px. It will be an impeccable picture and text alignment, and compatible with various browsers.
Well, the following is a list-style-image background and text alignment criterion: 12 PX Chinese character-16 PX Li height-8 PX background image.
What if it is 14px text? It is the background image of the 14px Chinese character-the height of 18px-the height of 10px. It has passed the National zxx 9002 quality system certification and is absolutely applicable.
In the end, it is troublesome to control the alignment of list-style-image in case of a topic... if... if you don't care about writing more code, try the following Li background image and text locating method:
<Style type = "text/CSS">
Ul {list-style: none; padding: 0; margin: 0; margin-left: 50px ;}
Ul Li {Background: URL (.. /image/li_point.gif) No-repeat left center; font-size: 12px; Height: 18px; text-indent: 16px; line-Height: 18px ;}
</Style>
You can control the start position of the text by setting the background and text-indent at the first line. The above code is superb in Firefox:
However, the IE slice has some downsides:
You can use CSS hack to adjust to the perfect state:
<Style type = "text/CSS">
Ul {list-style: none; padding: 0; margin: 0; margin-left: 50px ;}
Ul Li {Background: URL (.. /image/li_point.gif) No-repeat left center; font-size: 12px; Height: 18px; * Height: 16px; text-indent: 16px; line-Height: 18px; * padding-top: 2px ;}
</Style>
The red icon makes the text in IE sink 2 PX and perfectly aligned with the black dot above.
As follows:
The above two methods have some limitations, but in general I still think method 2 is better.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
