Html
橙橙鲁
作为一个前端人,无论工作跑偏到哪,始终不忘初心。
展开
-
html css js 大小写敏感问题
以下均在非严格模式下测试总结的:html标签(如img)、属性名(如class) 均会自动在浏览器转化为小写,对大小写不敏感。<IMg Class="Ab" src="A.png">属性值区分大小写,对大小敏感。如 Class="Ab" ,若在css中写ab{ } 的样式,并不会匹配生效。属性src的值,浏览器不会自动转换,但读取文件时对大小写不敏感。...原创 2020-01-10 14:14:55 · 2719 阅读 · 1 评论 -
Html5调手机拍照 & 相册
使用input标签的capture属性即可实现:调手机拍照:<input type="file" accept="image/*" capture="camera">调手机摄像:<input type="file" accept="video/*" capture="camcorder">调手机录音:<input type="file" accept="...原创 2019-08-26 16:05:38 · 554 阅读 · 0 评论 -
adblock 拦截 遇到的问题
插件adblock,会拦截广告,然后网站首页的轮询banner被拦截了。查了些资料,基本都是对官网介绍的copy,还是没弄懂具体拦截都有哪些,只是明白应该是有关键字的拦截。现象:本来应该创建出的dom节点:安装插件后:console中报错:network中这个获取banner数据的请求被拦截,根本没返回数据:先试了class和id中的banner,swiper 关键字替换掉,无...原创 2019-02-25 11:33:10 · 4680 阅读 · 0 评论 -
window系统对应默认IE浏览器版本
Windows 版本 IE 5 IE 6 IE 7 IE 8 IE 9 IE 10 IE 11 Windows 8 Windows Server 2012 不适用 ...原创 2017-08-09 11:42:38 · 4000 阅读 · 0 评论 -
【转载】Web移动端Fixed布局的解决方案
转自:http://efe.baidu.com/blog/mobile-fixed-layout/iOS下的 Fixed + Input BUG现象让我们先举个栗子,最直观的说明一下这个 BUG 的现象。 常规的 fixed 布局,可能使用如下布局(以下仅示意代码): <body class="layout-fixed"> <!-- fixed定位的头...转载 2017-08-10 18:01:01 · 350 阅读 · 0 评论 -
iPhone 的input圆角问题
在ios设备下,input会出现圆角问题,是浏览器自己添加的。如下图:在网上查了很多帖子,均说用input {-webkit-appearance: none;} 的方法,但怎么试都没用。测试机型如下:ios10.1,ios11.3,ios12.1 均没有用。但用最基础的border-radius:0 就好了。望大神们指点,-webkit-appearance: none; 都有用吗。...原创 2018-11-23 14:30:57 · 703 阅读 · 0 评论 -
td设置width有时无效
现象:下图中第二列的内容被遮住了,虽然td有width,但还是撑出外层容器了。table中td设置width有时,使用属性width方式,或者在td加style都不能生效。代码: &lt;style&gt; table,tr,td{ border: 1px solid rebeccapurple; } td{ padding: 1...原创 2018-10-29 09:07:29 · 15379 阅读 · 2 评论 -
IE8下input光标位置垂直不居中问题
IE8:光标高度与font-size一致; Chrome:光标高度与font-size一致,且自动垂直居中。 如下是IE8的效果,此框是在input上加的border: 暂未找到更高级的方法解决此问题,若有更简洁方式,请大神评论指点~ 我的解决方案如下: 在input外层加div,div设置height和line-height,input设置高度(高度为font-size的高度加高一点,原创 2017-10-20 16:39:17 · 2690 阅读 · 2 评论 -
IE8兼容性- 条件注释
条件注释只有在IE浏览器下才能执行,这个代码在非IE浏览下被当作注释忽略。如果是针对IE8 的样式文件,引入时写法: 其他写法类似项目范例说明![if !IE]The NOT operator. NOT运算符。这是摆立即在前面的功能,操作员,或子表达式扭转布尔表达式的意义。除了I原创 2017-10-10 16:55:28 · 1240 阅读 · 0 评论 -
解决 display:inline-block 左右间距问题 & 上下不对齐问题
一 、左右间距问题.h-div{ width:100px; height: 50px; background: plum; border: 1px solid darkslateblue; display: inline-block;}<div class="h"> <div class='h-div'></div> <div class='原创 2017-08-02 14:58:00 · 2767 阅读 · 0 评论 -
点击链接下载被弹框拦截
点击按钮,用window.open打开待下载链接,这时就会被浏览器拦截。 如:var a = "http://**.oss-cn-beijing.aliyuncs.com/****/Setup.exe";解决方法一: 提前获取待下载路径,添加到a标签的href属性即可。<a href="http://**.oss-cn-beijing.aliyuncs.com/**/Setup.exe">下载原创 2017-06-20 11:33:04 · 3180 阅读 · 0 评论 -
css变量使用
在css中使用变量的语法::root { --ylyblue:red;}body { --ylyblue: green;}.lab{ --ylyblue:plum;}a{ color:var(--ylyblue); /*color:currentColor;*/}<ul class="lab"> <li> <a href="#">原创 2017-01-04 15:33:29 · 628 阅读 · 0 评论 -
三分钟HTML5画布(Canvas)动画教程
此文下面的教程中将使用的是另外一个叫做kinetic的Web动画工具包。它们都是开源的。把鼠标放到上面的小丑脸上,然后移开,就会有如下效果。 第一步,画五官这个小丑没有耳朵和眉毛,所以只剩下三官,但它的两个眼睛我们要分别绘制,所以一共是四个部分。下面先看看代码。绘制左眼的代码var leftEye = new Kinetic.Line({ x: 150, point转载 2016-11-23 15:53:52 · 1655 阅读 · 0 评论