| 列表UL或是OL中都有一个预设标记，这个标记可能是实点圆点，也可能是数字。在实际的应用中，我们需要去掉这个预设标记，但我们不清楚这个预设标记是存在于什么位置。因为IE与FF似乎在处理UL的预设标记时都有着不同的方式：我们来写一个UL的HTML代码结构： HTML结构：
运行代码框
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行] 这个UL在不同的浏览器中的显示基本上是差不多的。那么我们设定一下CSS试着看一下IE与FF什么地方不一样： CSS代码： ul {background:#ddd; padding:0; } 运行代码框
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行] 现在只把padding的值设为0，这时我们看一下IE中除了多个背景之外并没有什么变化，但是FF中的预设标记不见了！这里要注意的是IE中的预设标记是在背景外的。我们再来换个方式来设置： CSS代码： ul {background:#ddd; margin:0; } 运行代码框
情缘.教程_网 [http://Www.XiuGoo.Com] [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行] 这里我们再看，情况相反，IE的预设标记不见了，而FF中的预设标记还在，这里要注意的是这时FF中的预设标记是在背景里的。当然我们这里有点不理解了，到底这是为什么呢？这个预设标记究竟是在什么地方的呢？下面我们通过一个实例来看一下UL的预设标记是在什么地方的！ HTML结构：
CSS代码： ul {background:#ddd; padding:100px; margin:100px; border:100px solid #eee; } li {background:#aaa;} 运行代码框
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行] 这时我们看到，margin区域是最外围的白色部分，往里有点灰色的是border，再往里是更深一点的灰色，这个区域是padding，最深的区域是内容区。而预设标记正处在padding的区域，那么是不是说把padding区去掉这个预设标记就会消失呢？我们把CSS做一下修改： CSS代码： ul {background:#ddd; padding:0; margin:100px; border:100px solid #eee; } li {background:#aaa;} 运行代码框
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行] 我们把padding设为0后发现预设标记依然还在，不过这时他处在了border的上面，那么我们可以根据上面推测出预设标记并不存在于margin,padding或是border中，margin,padding与border只不过为预设标记提供了一个存在并显示的空间。而这个预设标记是浮于margin,padding与border之上的。 那么这时我们大致上可能已经理解了，其实IE与FF对于UL的默认值的设定是不一样的，IE给了UL一个margin值，但是却没有给padding值，所以IE中UL的预设标记点是在背景外的。而FF相反给了一个padding值却没有给margin值，所以在FF中UL的预设标记点是在背景内的。但是依据上面的实例我们清楚，这个预设标记点不属于paading也不属于margin。他只属于内容部分，他一直是在内容的外边缘，当然我们还可以通过CSS来设置其在内容的内边缘。基本方式请查阅《CSS2中文手册》 通过上面的例子我们清楚了，想要让这个预设标记消失光用margin:0;与padding:0;因为如果出现了border的宽度达到一定的数值时这个预设标记还是会出现的。所以正确的写法是：margin:0; padding:0; list-style:none; 虽然预设标记很不错，但是却没办法精确控制，所以在实际应用中并不推荐使用，还是用背景图来代替！ |
|小黑屋|最新主题|手机版|微赢网络技术论坛
( 苏ICP备08020429号 )
GMT+8, 2024-9-29 15:19 , Processed in 0.168878 second(s), 12 queries , Gzip On, MemCache On.
Powered by Discuz! X3.5
© 2001-2023 Discuz! Team.
