HTML/CSS
qingyuexiao
喜爱武侠、漫画、各类运动
展开
-
JS可循环弹幕示例
朋友有项目需要做弹幕效果,网上找了示例代码,运行起来有点问题(文字重叠+没有循环),让我看下。由于我比较不喜欢跟着别人思路走,因此干脆重新写了一个,基本实现弹幕功能,支持PC和移动端。具体功能如下:支持指定弹幕行数 支持循环播放 支持弹幕开关 支持设置评论颜色(通过CSS支持,可改造成直接设置字体颜色) 支持设置弹幕透明度效果如下:完整代码见:https://github.com/qingyuexiao/SimpleBarrage...原创 2020-09-14 08:54:04 · 1146 阅读 · 0 评论 -
在Less中使用calc完成不同单位的宽度计算
在CSS中,calc的使用很简单,直接做加减法就行了(即使单位不同): div > span { width: calc(100% - 10px);} 然而在Less中,这样写是不可行或者说达不到预期的效果的,需要转义calc的参数,具体语法如下:div { > span { width:calc(~'100% ...原创 2018-01-23 15:41:05 · 4615 阅读 · 0 评论 -
Firefox下使用float:right换行问题
今天遇到一个很奇怪的问题,使用float:right时,在Firefox中显示到了下一行(不是内容过长),而在Chrome和IE(10、11)中都是正常的。代码类似如下: <div> <span>logo</span> <span>name</span> <div style="displa...原创 2017-05-24 10:59:32 · 521 阅读 · 0 评论 -
jquery animate()背景色渐变的处理
jquery animate函数不能处理背景色渐变,需要使用jquery.color插件gitHub地址:https://github.com/jquery/jquery-color/使用代码:[code="js"]$(function(){ $("#cdiv").animate({ backgroundColor:'#FF0000' }, 1...原创 2014-12-05 09:41:53 · 685 阅读 · 0 评论 -
【转】Meta告知IE浏览器兼容模式
在html的head头内如下写法,节选自http://www.xingzai.org/html-note/meta-tag-usage-order.html:[code="html"]1.[/code]原文地址:[url]http://cssor.com/meta-ie-x-ua-compatible.html[/url]...原创 2014-10-09 21:41:33 · 121 阅读 · 0 评论 -
修改placeholder提示文字颜色
Chrome:[code="css"]::-webkit-input-placeholder{ color:#bfbfbf;}[/code]Firefox[code="css"]::-moz-placeholder{ color:#bfbfbf;}[/code]原创 2013-12-13 15:54:16 · 370 阅读 · 0 评论 -
Chome中text-decoration值为initial问题(设置为none无效)
本人做页面设计器开发,需要保存页面元素属性,近期发现偶有text-decoration属性值保存为initial,以致在IE中读取数据时报属性设置异常的脚本错误,经查发现是因为使用谷歌浏览器(Chrome)进行属性设置时,若是把text-decoration值设置为none,就会返回initial值,即:[color=darkblue]element.style.textDecoratio...原创 2013-01-25 11:10:05 · 581 阅读 · 0 评论 -
IE8下iframe中嵌套帆软报表页面显示空白问题
前两天项目组发现一个问题,在IE8下使用标签页+iframe显示多个页面的时候,打开其他页面都正常,但是打开使用帆软报表软件(FineReport)开发的报表页面就显示空白,奇怪的的是看状态栏有加载相应页面,而且改变一下iframe的窗口大小(例如按F11全屏)页面就会立刻显示出来,感觉就是页面从服务端加载后受到什么阻塞没有最终渲染出来。问题很难诊断,特别是现在都升级到IE9/IE10了,使用开发...2013-06-19 11:15:33 · 2032 阅读 · 0 评论 -
【转】去除inline-block元素间间距的N种方法
[size=large][b]一、现象描述[/b][/size]真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: 间距就来了~~我们使用CSS更改非inline-block水平元素为inline-block水平,也会有该问题:.space a { display: inline-block;...原创 2012-08-23 15:34:31 · 98 阅读 · 0 评论 -
TR边框定义在IE中无法显示问题
在[b]IE[/b]中定义TR的边框,如:[color=green] ...[/color]或者[color=green]TR{ border:1px solid #cccccc;}[/color]均无法显示,TABLE样式中加上"border-collapse: collapse;”并不起作用,在Firefox和Chrome中显示正常。原因还是在于...原创 2012-03-15 16:25:59 · 299 阅读 · 0 评论 -
IE6下无法显示微软雅黑字体问题
按美工给的页面样式处理页面时,发现在IE6下微软雅黑显示为宋体,但是打开美工给的静态页面显示是OK的,而IE8和Chrome、Firefox神马的都没问题。 问题拖了很久后今天稍微研究了一下,网上有说是因为编码问题,必须用GB2312字符集才能正确显示字体,想起美工给的页面的确是GB2312的,于是试着把页面的字符集由UTF-8改成了GB2312,但没有效果。又查了一些网页,终于...2011-12-20 16:28:14 · 143 阅读 · 0 评论 -
IE6下CSS样式无效问题
这两天被一个CSS问题纠结了很久,代码很简单,就是写一个有收起功能的分隔栏: [color=green][/color] 当收起的时候,splitbar的class="fold",CSS如下: [color=brown]#splitbar.expand{ .... background-image:url(a...原创 2011-03-14 10:39:46 · 81 阅读 · 0 评论 -
CSS中behavior的路径问题
在研究IE中PNG图片透明度问题时,了解到iepngfix.htc这个东西,进而看到大家用behavior来解决该问题。基本意思就是先下个iepngfix的包,其解其中的blank.gif和iepngfix.htc(最新版本还需用上iepngfix_tilebg.js来解决背景repeat问题),在CSS中配置behavior:url("目录/iepngfix.htc");即可。要注意的是...原创 2010-06-22 18:40:52 · 261 阅读 · 0 评论 -
IE和firefox中的宽度显示差异
WEB开发中,在做浏览器兼容性测试时常常发现IE和FF/Chrome的宽度不同,在IE中正常的宽度到了FF或Chrome中就变宽撑大了,界面就变得很奇怪。因为界面相对属于小问题就一直没有仔细研究,稍微改改看上去差得不多就算了。今天终于查了一下原因,顿悟~ FF是按W3C的标准执行,标准CSS中所指的width的宽度只包含容器中内容的宽度。而Internet Explorer中...原创 2010-06-18 12:17:18 · 148 阅读 · 0 评论 -
background-position在Firefox下的问题
今天写了一段CSS样式,内容如下:.delete_icon{ background:url(../img/icons.gif) 0 -22 no-repeat;}该样式应用于一个TD中,运行时在IE和Chrome浏览器下都是正常的,但是FF下无法显示出背景图片,多次试验后估计是图片定位的问题,也就是“background:url(../img/icons.gif) [color=...2010-05-14 17:00:19 · 219 阅读 · 0 评论 -
tr的display属性设置在firefox和chrome中出现td的colspan无效问题
今天用firefox和chrome测试页面的时候,发现用javascript控制 tr 的显示隐藏时,当把tr的显示由“display:none”改为“display:block”时,该tr下的td内容合并到了第一个td里,也就是说,原先在td中设置的colspan属性无效了。 由于display属性设置为空时,默认为显示,因此将“display:block”改为“display...原创 2010-05-12 16:35:50 · 419 阅读 · 0 评论