十二月
24
2015

笔记005 img 与包裹它的标签间存在 4px 间隙的问题

今天在写 html 标签的时候,莫名地发现图片下面出现了莫名其妙的 4 个像素,审查元素检查了一下,也没有发现其它的样式造成了什么影响。那么问题来了,为什么会出现这 4 个奇怪的像素呢? 于是乎,赶紧百度了一下,还好,这个问题,度娘是知道的。造成这个问题的原因如下: 由于是写 html5 的页面,所以在页面的头部添加的代码是: <!DOCTYPE html> 而不是像以前的 html4 那样写一大串 DOCTYPE,例如: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 而图片文字等 inline 元素默认是和父级元素的 baseline 对齐的,而 baseline 又和父级底边有一定距离(这个距离和 font-size,font-family 有关),所以为 img 设置 vertical-align: top / bottom / text-top / text-bottom 都可以避免这种情况出现。 因此,在添加了 html5 样式的 'DOCTYPE以后,只要用Block标签去包裹img` 标签,就会出现那个莫名的 4px。 参考地址:点击这里
九月
12
2015

笔记004 用户代理 User-Agent

User Agent中文名为用户代理,是Http协议中的一部分,属于头域的组成部分,User Agent也简称UA。它是一个特殊字符串头,是一种向访问网站提供你所使用的浏览器类型及版本、操作系统及版本、浏览器内核、等信息的标识。通过这个标识,用户所访问的网站可以显示不同的排版从而为用户提供更好的体验或者进行信息统计;例如用手机访问谷歌和电脑访问是不一样的,这些是谷歌根据访问者的UA来判断的。UA可以进行伪装。 浏览器的UA字串的标准格式:浏览器标识 (操作系统标识; 加密等级标识; 浏览器语言) 渲染引擎标识版本信息。但各个浏览器有所不同。 1. 浏览器标识 出于兼容及推广等目的,很多浏览器的标识相同,因此浏览器标识并不能说明浏览器的真实版本,真实版本信息在 UA 字串尾部可以找到。 2. 操作系统标识 平台标识备注 FreeBSDX11;FreeBSD(version No.) i386 X11;FreeBSD(version No.) AMD64 LinuxX11;Linux ppc X11;Linux ppc64 X11;Linux i686 X11;Linux x86_64 MacMacintosh;PPC Mac OS X Macintosh;IntelMac OS X SolarisX11;SunOS i86pc X11;SunOS sun4u WindowsWindows NT 6.1对应 Win7 Windows NT 6.0对应 Win Vista Windows NT 5.2对应 Win 2003 Windows NT 5.1对应 Win XP Windows NT 5.0对应 Win 2000 Windows ME Windows 98 3. 加密等级标识 N: 表示无安全加密 I: 表示弱安全加密 U: 表示强安全加密 4. 浏览器语言 浏览器使用的语言 5. 渲染引擎 显示浏览器使用的主流渲染引擎有:Gecko、WebKit、KHTML、Presto、Trident、Tasman等,格式为:渲染引擎/版本信息 6. 版本信息 显示浏览器的真实版本信息,格式为:浏览器/版本信息 7. 浏览器UA信息 PC端 safari 5.1 – MAC User-Agent:Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; en-us) AppleWebKit/534.50 (KHTML, like Gecko) Version/5.1 Safari/534.50 safari 5.1 – Windows User-Agent:Mozilla/5.0 (Windows; U; Windows NT 6.1; en-us) AppleWebKit/534.50 (KHTML, like Gecko) Version/5.1 Safari/534.50 IE 9.0 User-Agent:Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; IE 8.0 User-Agent:Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0) IE 7.0 User-Agent:Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0) IE 6.0 User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1) Firefox 4.0.1 – MAC User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0.1) Gecko/20100101 Firefox/4.0.1 Firefox 4.0.1 – Windows User-Agent:Mozilla/5.0 (Windows NT 6.1; rv:2.0.1) Gecko/20100101 Firefox/4.0.1 Opera 11.11 – MAC User-Agent:Opera/9.80 (Macintosh; Intel Mac OS X 10.6.8; U; en) Presto/2.8.131 Version/11.11 Opera 11.11 – Windows User-Agent:Opera/9.80 (Windows NT 6.1; U; en) Presto/2.8.131 Version/11.11 Chrome 17.0 – MAC User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_0) AppleWebKit/535.11 (KHTML, like Gecko) Chrome/17.0.963.56 Safari/535.11 傲游(Maxthon) User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Maxthon 2.0) 腾讯TT User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; TencentTraveler 4.0) 世界之窗(The World) 2.x User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1) 世界之窗(The World) 3.x User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; The World) 搜狗浏览器 1.x User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Trident/4.0; SE 2.X MetaSr 1.0; SE 2.X MetaSr 1.0; .NET CLR 2.0.50727; SE 2.X MetaSr 1.0) 360浏览器 User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; 360SE) Avant User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Avant Browser) Green Browser User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1) 移动设备 safari iOS 4.33 – iPhone User-Agent:Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5 safari iOS 4.33 – iPod Touch User-Agent:Mozilla/5.0 (iPod; U; CPU iPhone OS 4_3_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5 safari iOS 4.33 – iPad User-Agent:Mozilla/5.0 (iPad; U; CPU OS 4_3_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5 Android N1 User-Agent: Mozilla/5.0 (Linux; U; Android 2.3.7; en-us; Nexus One Build/FRF91) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1 Android QQ浏览器 For android User-Agent: MQQBrowser/26 Mozilla/5.0 (Linux; U; Android 2.3.7; zh-cn; MB200 Build/GRJ22; CyanogenMod-7) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1 Android Opera Mobile User-Agent: Opera/9.80 (Android 2.3.4; Linux; Opera Mobi/build-1107180945; U; en-GB) Presto/2.8.149 Version/11.10 Android Pad Moto Xoom User-Agent: Mozilla/5.0 (Linux; U; Android 3.0; en-us; Xoom Build/HRI39) AppleWebKit/534.13 (KHTML, like Gecko) Version/4.0 Safari/534.13 BlackBerry User-Agent: Mozilla/5.0 (BlackBerry; U; BlackBerry 9800; en) AppleWebKit/534.1+ (KHTML, like Gecko) Version/6.0.0.337 Mobile Safari/534.1+ WebOS HP Touchpad User-Agent: Mozilla/5.0 (hp-tablet; Linux; hpwOS/3.0.0; U; en-US) AppleWebKit/534.6 (KHTML, like Gecko) wOSBrowser/233.70 Safari/534.6 TouchPad/1.0 Nokia N97 User-Agent: Mozilla/5.0 (SymbianOS/9.4; Series60/5.0 NokiaN97-1/20.0.019; Profile/MIDP-2.1 Configuration/CLDC-1.1) AppleWebKit/525 (KHTML, like Gecko) BrowserNG/7.1.18124 Windows Phone Mango User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0; HTC; Titan) UC无 User-Agent: UCWEB7.0.2.37/28/999 UC标准 User-Agent: NOKIA5700/ UCWEB7.0.2.37/28/999 UCOpenwave User-Agent: Openwave/ UCWEB7.0.2.37/28/999 UC Opera User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; ) Opera/UCWEB7.0.2.37/28/999
八月
13
2015

笔记003 去掉Chrome下保存密码后输入框的黄色背景

做前端的童鞋一定经常遇到过chrome保存密码后input输入框会变成黄色,对于正在开发中的项目,老是出来黄色背景很是不爽。 我们用代码审查查看了input样式发现有如下样式设定 然后我用!important设定后发现不能修改默认状态。最后用了阴影实现了 input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { box-shadow:0 0 0 60px #fff inset; -webkit-text-fill-color: #333; } 如果不想保存密码的话加个autocomplete="off"到form或者input就行了。 文章出处:http://labs.enonic.com/articles/remove-forced-yellow-input-background-in-chrome
十二月
13
2014

笔记002 HTTP的Content-Type对照表

Content-Type是HTTP协议中的一个实体头。至于实体头是个什么东东,Hy369在这里不再深究,这里只是假设读者已经知道何为实体头。Content-Type是响应消息中非常重要的一段信息。Content-Type的存在,决定了其之后的文档所属的类型。

阅读全文>>

十二月
11
2014

笔记001 Form表单回车响应要点

前端开发不可避免地要接触到Form表单,Hy369写了几年的页面了,自认为对Form表单比较了解的情况下,却还是出现了问题。而且这个很容易就遇到的问题,居然那么碰巧地在前几年里被避开了,直到现在才遇到,不得不说很是让人汗颜。

阅读全文>>