最终代码
<span style="width:40px;display:-moz-inline-box;display:inline-block;">1.</span>
------------------------------------
解释下过程
http://www .w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http ://www.w3.org/1999/xhtml " >
<head>
<title>Test Span</title>
<style type="text/css">
span {
background-color:#ffcc00;
width:150px ;
}
</style>
</head >
<body>
fixed <span >width</span> span
</body>
</html>
通过试验以后发现,无效,无论是在Firefox还 是IE中都无效 。
通过查阅 CSS2标准中关于width 的定义发现,原来CSS中的 width 属性并不总是有效的,如果对象是 inline 对象,width 属性就会被忽略。Firefox 和 IE 原来是遵循了标准才这样做的。
修改 span 为 block 类型并设置 float 不是完美解决
在span的CSS中增加display属性,将span设置为block类型的Element,这样宽度的确有效了,不过也把前后文字隔在不同行里面。这样其实span就完全变成了div。
span { background-color:#ffcc00; display:block; width:150px;}
很多人会建议再增加一个CSS 属性 float ,这样的确在某种条件下能解决问题。比如我们的例子中,如果span前面没有文字
,那的确是可行的。但是如果有了,前后文字就会连在一起,而span跑到了第二行。span { background-color:#ffcc00;
display:block; float:left; width:150px;}
设置 span 宽度的完美解决方案
下面代码的 CSS定义完美解决了span的宽度设置问题。由于浏览器通常对不支持的CSS属性采取忽略处理的态度,所以最好将
display:inline -block行写在后面,这样在Firefox里面,如果到了未来的Firefox
3,这一行就能起作用,代码可以同时兼容各种版本。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>Test Span</title>
<style type="text/css">
span { background-color:#ffcc00; display:-moz-inline-box; display:inline-block; width:150px;}
</style>
</head>
<body>
fixed <span>width</span> span
</body></html>
分享到:
相关推荐
一、形如<span>ABC</span>独立行设置SPAN为固定宽度方法如下: span {width:60px; text-align:center; display:block; } 实际验证结果:IE6 OK, FIREFOX 3 OK。 一、形如<span>ABC</span>DEF格式行设置SPAN为...
span 表示行内元素,相当于 inline 属性,只会根据元素的宽度自行展开,自己设置宽度,不起作用。 那如果我特别希望将 span 元素设置为宽度且不设置元素呢?下面通过几个方式去实现。 方式一 设置 span 属性为 span{...
span设置宽度后,通过试验以后发现,无效,无论是在Firefox还 是IE中都无效,原因是CSS中的width属性并不总是有效的,看完本文或许会得到解决方法
兼容火狐IE的团购倒计时代码, 距离本次团购结束还有:<span id="span_dt_dt1"></span> 距离本次团购结束还有:<span id="span_dt_dt2"></span>
<body> <form id="form1" runat=... <span class="STYLE2">*</span>封面: ;"> ID="FileUpload1" runat="server" />请上传案例的封面图片 </form> </body>
兼容ie8、ie9的placeholder属性,其他浏览器用自身的placeholder。在ie8和ie9浏览器,点击span则让input聚焦。
span无法设置宽度的问题,想必大家都有遇到过吧,其实很简单之需将其设置display:inline-block即可解决问题,需要的朋友不要错过
ie支持outerText,firefox支持textContent 代码如下:if (isIE) { var spanTest=document.getElementById(‘spanTest’); spanValue = spanTest.outerText; } else { spanValue = spanTest.textContent; }
今天介绍的方法兼容IE FF,看下面的详细介绍: 为了更符合实际,用一个div装起要调试的内容,并为这个div定义一个宽度。 例如: css代码: div{width:200px;} html代码: <div><span>软件开发网-中国网页设计,...
...
...
用span标签定位到placeholder位置,用jq控制span的显示和隐藏。
css span宽度设置生效.docx
主要介绍了设置span宽度高度的方法,需要的朋友可以参考下
复制代码代码如下: <...}.tu_freeline_list li span{float:left;height:30px;overflow:hidden;width:155px;font-size:12px;}.tu_freeline_list li strong{float:right;font-size:12px;}</style><ul cla
div: div是一个块级元素,可以包含段落,表格等内容,用于放置不同的...span是一个内联元素,没有实际意义,它的存在纯粹是为了应用样式,给一段内容加上<span></span>标记可以通过在span上定义样式来设定其内容的样
KindEditor是一套开源的HTML可视化编辑器,兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。KindEditor使用JavaScript编写,可以无缝的于Java、.NET、PHP、ASP等程序接合。 KindEditor非常适合在CMS、商城、...