Ensuring that list images are never truncated on the left
I want to ensure that my list images (i.e., bullet symbols for unordered lists and numbers/letters/etc. for ordered lists) never truncate on the left, regardless of the font size they use. This seems to be an issue for WebKit-based browsers and I'm not sure of a decent workaround.
For example, the following piece of HTML displays improperly with Chrome 8/9:
<html>
<body>
<ol style="font-size: 48px;">
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
</body>
</html>
The same piece of HTML displays properly (i.e., it doesn't truncate on the left) in Internet Explorer 8.
Two (undesirable) workarounds I've discovered are:
- Specify
list-style-position: inside;on the list. This forces the list image to flow with the content, but it makes for a non-standard/messy lo开发者_如何学Cok, IMO. - Specify some type of margin/padding on the list. This works, but then it adds too much padding to lists with smaller font sizes.
Here's a screenshot that shows the problem in Chrome 9.0.597.98; note how the numbers are cut off on the left margin:
I see your problem in Chrome 9 and the latest Safari on OSX. You can try specifying the margins in ems to get them to scale with the font-size, this produce reasonable results for me:
ol { margin-left: 0.5em; }
li { margin-left: 0; }
but YMMV of course. Your best bet is to use a class on the <ol> to keep the font-size and margin-left together, then you can tweak them together to get reasonable results in the various browsers.
This isn't a perfect solution but going for pixel-identical results in multiple browsers and on multiple operating systems is not only frustrating and often impossible but also a bit pointless (IMHO).
<html>
<style>
#big {font-size:48px;}
#little {font-size:12px;}
ol { padding:0; margin:0; }
li { margin:0 0 0 96px; padding:0 0 0 14px; }
</style>
<body>
<ol id="big">
<li>one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one </li>
<li>two</li>
<li>three</li>
</ol>
<ol id="little">
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
</body>
</html>
Do you set margin / padding for your lists ?
Browsers may have different "default" styles for UL and OL elements.
It is often usefull to apply "reset" style rules and/or specify the styles you want to be applied to common elements such as lists, paragraphs, blockquotes, tables, headings,...
see here for basic CSS resets : http://meyerweb.com/eric/tools/css/reset/
加载中,请稍侯......
精彩评论