转自:http://blog.csdn.net/tb12315/article/details/8519862
在IE6,IE7下使用标签时,在加入右浮动样式(float:right)后,会换行的bug解决方案:
bug案例:新闻列表中,为使时间右对齐,加右浮动产生换行
<ul>
<li><a href=“#”>BEST SUSHI MENU</a> <span>2012-12-24</span></li>
<li><a href=“#”>BEST SUSHI MENU</a> <span>2012-12-24</span></li>
<li><a href=“#”>BEST SUSHI MENU</a> <span>2012-12-24</span></li>
<li><a href=“#”>BEST SUSHI MENU</a> <span>2012-12-24</span></li>
</ul>
产生原因分析: Span本身虽然是内联元素,但加上浮动后它就变成了块级元素了,所以才会自动换行,浮动元素的顶端不能高于先于它出现的浮动元素或段落的顶端。 解决方案: 1. span和a标签交换位置.
<ul>
<li><span>2012</span><a>BEST SUSHI MENU</a></li>
</ul>
缺点:语义结构发生改变,不合逻辑.
2.
a加左浮动,span加右浮动
3.
使用IE hack 在span标签中加入只有IE6,7可以识别的样式
*margin-top:20px;
_margin-top:20px;
说明,使换行的部分根据margin-top再呈现出来.
4.最佳方案
li{position:relative;}
li span{position:absolute ;right:0px;}
注:在li标签中使用positon:relative,在li span中使用absolute绝对定位来使span内容重新定位。
以上是转自别人的博客的解决方法。但是我试验了上边的方法,上边的方法能解决在IE中的问题,但是在webkit内核的浏览器中浏览又会出现同样的问题。
后来试了一下,发现把第二个方法稍微修改一下,两个都会兼容。
方法是按照上边的第二个方法,但是加完以后在a标签的float前加*,使该样式只能在IE中起作用。
#columnlist li a
{
*float: left;
}
相关推荐
然而,在某些情况下,这可能会导致意想不到的布局问题,比如"span加float:right右浮动后内容换行下移"的问题,这个问题在描述中已经明确指出。 首先,让我们回顾一下上述示例代码: ```html <!DOCTYPE html> ...
在网页布局设计中,`float`属性是一个至关重要的CSS特性,它允许元素脱离其正常文档流,从而可以创建多列布局、对齐...然而,在还需要支持旧版IE浏览器的项目中,理解并解决`float:right`引起的换行问题仍然是必要的。
本文将详细讨论`float:right`在IE7中遇到的元素换行错位问题以及如何解决这个问题。 首先,我们需要理解`float`属性的工作原理。`float`属性允许元素脱离其正常文档流,向左或向右移动,直到其边缘碰到容器的边框或...
1、core-renderer.jar该jar包修改过中文不换行问题 public static String getConversionHtmlCode(String linkcss,String htmlCode,String title){ String css = ""; css +="<style>"; css +="table{"; ...
在“CSS无难事-浮动floatright的应用和li的高度问题”这个主题中,我们将探讨`float:right`的用法以及`<li>`元素高度问题的解决策略。 首先,让我们了解`float:right`。当将一个元素的`float`属性设置为`right`时,...
### 解决多浏览器下IE6、IE7及Firefox中`<li>`元素间距兼容性问题 #### 背景介绍 在Web开发过程中,我们经常会遇到不同浏览器对CSS样式的解析差异导致页面显示效果不一致的情况。特别是对于早期版本的Internet ...
在使用UL和LI显示文字的时候,由于IE浏览器对LI的文字长度没有默认强制令起一行。导致如果文字超出UL设定的宽度再先有的位置上折行,造成显示问题。 解决方法: 复制代码代码如下: ul li{ white-space:nowrap; } ...
#tabs1 a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#627EB7; } #tabs1 a:hover { background-position:0% -42px; } #tabs1 a:hover span { background-position:100% -42px...
在本文中,我们将探讨如何在不同情况下将Span标签设置为固定宽度,并理解不同display属性的差异。 首先,让我们了解为何直接给Span标签设置width属性无效。这是因为按照CSS标准,对于inline元素,width和height属性...
但是当高度不一致时,就需要想别的办法来解决了: 1、给父元素定义font-size:0; 浮动子元素定义需要的font-size, 再定义display:inline-block;vertical-align:top; 复制代码代码如下: ul{ margin:0; padding:0; ...
需要注意的是,这种方法可能在某些特定情况下产生问题,比如当`<li>`元素的宽度比`<ul>`的宽度小时,`right: 50%`可能会超出`<ul>`的边界。此外,由于使用了浮动,`<ul>`的高度不会自动扩展以包含所有`<li>`元素,...
3. **CSS样式调整**:给`#mylist li span`设置`float:right`,使日期元素向右浮动。同时,为了保持列表项的宽度一致,可以为`#mylist`设置宽度,比如`width:400px`。 ```css #mylist { width: 400px; list-style-...
### IE6中的`li:hover`问题及解决方案 #### 背景介绍 早期浏览器的兼容性问题一直是前端开发者面临的一大挑战。特别是在Internet Explorer 6(简称IE6)中,由于其对CSS支持的限制,很多现代网页设计效果都无法正常...
通过以上介绍,我们可以看到,利用CSS中的`word-wrap`和`word-break`属性,能够轻松解决纯数字或字母串不换行的问题,同时保证页面布局的整洁和美观。这对于提高用户体验和页面质量具有重要意义。
float: right;/*使span元素浮动到右面*/ text-align: right;/*日期右对齐*/ padding: 6px 0px 4px 15px; font-size:13px; } .list li a:hover{ color: #336699; background: url(zf11_Guide.gif) no-repeat 0...
这个问题的解决方案涉及到CSS(层叠样式表)中的定位属性和浮动概念。在给出的示例中,通过CSS样式实现了`li`标签中的`span`日期元素向右对齐。 首先,我们来看一下关键CSS代码: ```css .artlist ul li span { ...
本文实例为大家分享了js使用ul中li标签实现删除效果的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"&...