li没有设置with导致IE不认背景图片,而FX则可以。
html:
<div class="menutitle" onclick="SwitchMenu(5)" id="imgmenu5">第一级菜单</div>
<ul class="submenu" id="sub5" style="display:none;">
<li class="menulite" id="ling1" onclick="showm(1)">第二级菜单</li>
<li class="menulites" id="lite1" style="display:none;">
<div>第三级菜单</div>
<div>第三级菜单</div>
<div>第三级菜单</div>
</li>
</ul>
css:
.submenu li{background:url("../images/skin.gif") 0px -83px no-repeat;padding:3px 0px 2px 30px;}
.menulite{cursor:pointer;background:url("../images/skin.gif") 0px -200px no-repeat !important;}
由于css中li没有设置width。在IE下,li的长度被认为是文字的长度,故在“第二级菜单”文字之外,鼠标不为手指符号。在FX下则没有这个问题。
解决的办法是:
设置.submenu li的width属性。
.submenu li{background:url("../images/skin.gif") 0px -83px no-repeat;padding:3px 0px 2px 25px;width:115px;}
分享到:
相关推荐
在Web开发过程中,我们经常会遇到不同浏览器对CSS样式的解析差异导致页面显示效果不一致的情况。特别是对于早期版本的Internet Explorer(如IE5、IE5.5、IE6、IE7)与现代浏览器(如Firefox)之间存在的差异更为明显...
ul li 换色 li 列表布局隔行,color from red tabs 背景颜色
在设计用户界面时,为了提升视觉效果和用户体验,有时我们需要自定义控件的外观,例如设置背景图片。本教程将详细介绍如何在PB中为TreeView控件设置背景图片。 在PowerBuilder 11.5中,我们可以通过编程的方式来...
运用以上的代码可以使ie6支持li:hover的使用
另一种方法是利用CSS的`background`属性,将图标作为背景图片设置到`<li>`元素上。这种方式提供了更多的灵活性,可以调整图标的位置、大小等。例如: ```html .with-icon { background-image: url('icon.png'...
值得一提的是,`background`属性被设置在`<body>`标签上,用来显示默认的背景图片,该属性包括图片的URL、图片不重复显示以及背景图片的尺寸。 接下来,我们深入JavaScript部分。在文档加载完成后,一个匿名函数`...
5. **图片加载优化**:大背景图片可能导致页面加载速度变慢,因此可能需要使用懒加载技术,只有当图片进入视口时才开始加载。 6. **交互效果**:通过jQuery监听用户行为,如鼠标悬停或点击,改变导航栏的样式,比如...
在网页设计中,我们经常需要实现一些动态效果来提升用户体验,比如列表项(Li)的背景颜色交替。这个"用CSS JS控制Li背景颜色交替"的主题就涉及到了如何使用CSS和JavaScript来实现这样的功能。首先,我们要理解CSS和...
在网页设计中,`div`、`ul`和`li`是...通过调整`display`属性、设置图片大小和使用媒体查询,我们可以实现各种布局效果,包括但不限于水平列表、网格布局等。在实际应用中,还需要根据具体需求和设计来调整这些样式。
例如,`.nav ul li a:hover` 定义了鼠标悬停时的背景图片和颜色,确保悬停状态下的背景也是不规则形状,并且与相邻的菜单项无缝连接。 5. **浏览器兼容性处理**:由于历史原因,如IE6等老版本浏览器对CSS支持有限,...
**jQuery图片轮播兼容IE浏览器** 在Web开发中,图片轮播是一种常见的功能,用于展示一组图片或内容,常用于网站的首页或者产品展示区。jQuery作为一种轻量级的JavaScript库,提供了丰富的API和插件,使得实现图片...
在JavaScript编程领域中,"LI更换背景更换显示区域内容JS效果"是一个常见的需求,尤其在构建动态用户界面时。这个主题涉及到DOM操作、事件监听、CSS样式修改等多个方面。下面我们将详细探讨这些知识点。 首先,`LI`...
如果标题前的图标是单个点、方块或其他类似的简单图形,那么我们应该将背景图片设置在`<li>`元素上。这是因为每个列表项只需要一个独立的图标,而不是在整个列表宽度上显示。如下所示: ```css .test1 li { ...
2. **CSS 样式**:为导航链接设置背景图片和初始样式,例如: ```css #nav li a { display: block; width: 100px; /* 自定义宽度 */ height: 50px; /* 自定义高度 */ background-position: center top; /* 图片...
`<div>`元素则承载着实际的图片内容,可能包含多个`<img>`标签,或者使用CSS背景图片来显示轮播图片。HTML结构可能类似以下形式: ```html <li class="prev"></li> <li class="next"></li> <!-- 更多...
3. **兼容性修复**:对于IE6和IE7,它们不支持某些CSS3属性和现代JavaScript特性。例如,可能需要使用`filter`属性来模拟透明度效果,使用` Conditional Comments `来针对IE应用特定的样式修复,或者使用jQuery的`....
2. **颜色和边距**:可以使用`color`、`background-color`、`padding`等属性来改变`<li>`的颜色、背景和内边距: ```css li { color: #333; background-color: #f8f8f8; padding: 10px; } ``` 3. **排列方式...
<li>a</li> <li>a</li> <li>a</li> <li>a</li> <li>a</li> 我们遍历ul 下所有的li 并添加点击事件,一般我们会在for循环里面添加点击事件,但是结果和我们所期盼不一样,那么是为什么呢???? 接下来看看我们的...
本文将探讨一个特定的案例:`li` 元素在 IE 和 Firefox 浏览器中的行高不一致问题以及如何解决这个问题。 `li`(列表项)元素在不同浏览器中可能会由于默认样式或渲染引擎差异导致显示效果不统一,特别是在涉及行高...