html
叶落无痕123
好好学习天天向上
展开
-
针对谷歌默认最小字体12px的正确解决方案 (css、html)
今天晨会,产品要求把以前12px的字体改小一点,我心想这有什么难的,就随口答应了。哪知,改css的时候,谷歌浏览器中font-size小于12px时,字体就不会再缩小了。当时我的第一反应就是会不会是其他css把字体覆盖了。结果看了半天也没发现。于是,只百度一伙了,结果还真让人大吃一惊:原来谷歌以及谷歌内核的浏览器在中文语言下最小字体只能是12px。不知道这算是一个bug还是谷歌人性化的设计。不管那么多了,反正要解决这个问题呀~既然这是一个经典的兼容性问题,一定有很多解决方法吧。让人吃惊的是,再百度一伙,网上转载 2020-12-11 11:29:15 · 889 阅读 · 0 评论 -
【CSS】CSS怎么设置小于12px的字体 浏览器限制最小字体大小解决方法
CSS的最小尺寸为1px,所以理论上可以将font-size设置为1px,但是实际上如果将font-size属性缩小到12px以下就没有效果了,这是因为浏览器限制了最小字体大小这只是PC端的浏览器进行的限制,手机端默认没有开启该限制,还是可以直接通过CSS设置最小字体的限制原因这个是 Chrome 为了更好显示中文设计的,google公司认为,人眼最小最舒服的字体识别是12px,小于12px的字体将会引起不适比如:解决方法使用transform: scale();属性缩放字体所在元素即转载 2020-12-11 11:21:24 · 9297 阅读 · 0 评论 -
img图片不显示时设置默认图片
img标签显示图片:<img src="url" alt="error txt" />当图片地址错误时,就是显示error txt,为了更好的用户体验,通常我们可以设置一张默认图片,当图片地址错误时,就显示该默认图片。img是自闭合标签,所以一般不会去考虑使用伪元素before或after,但是,经过测试,在chrome68.0.3440.75上确实可以使用的,当图片地址正确时,该标签正常显示,before或after不生效,但是当图片错误时,img标签会变成一个双闭合标签,bef转载 2020-11-23 11:18:21 · 2131 阅读 · 0 评论 -
清除input的历史记录
禁止历史的显示 使用“autocomplete”属性<input class="" type="text" autocomplete="off"></input>原创 2020-07-10 16:00:15 · 509 阅读 · 0 评论 -
checkbox样式美化 修改复选框样式
input[type="checkbox"] { width: 20px; height: 20px; display: inline-block; text-align: center; vertical-align: middle; line-height: 18px; position: relative; ...原创 2020-06-13 18:22:07 · 1229 阅读 · 0 评论 -
解决input,number类型的maxlength无效
使用input数字number类型的时候maxlength无效,假设需要控制输入数量为5,可以用以下方式:无效:<input type="text" maxlength="5" /> 效果ok,当<input type="number" maxlength="5" />有效:<inputtype="number"oninput="i...转载 2019-08-26 08:18:37 · 6219 阅读 · 0 评论 -
input 使用outline属性去掉淡蓝色边框不生效
1.常用的做法是使用outline:none 这个样式就可以了<html> <head> <title> 测试 </title> <style type="text/css"> input{ outl...转载 2019-01-10 10:12:53 · 5324 阅读 · 0 评论 -
跳页注意
法一:<span id="btnBack" class="sub-btn" onclick="javascript:history.back(-1);">返回列表</span>法二://返回列表function doGoBack(){ window.location.href="{:url('comp/article/index')}"}&am原创 2018-10-17 17:20:38 · 198 阅读 · 0 评论 -
html5新增标签
HTML5中新增的标签 定义文章 定义页面内容旁边的内容 定义声音内容 定义图形 定义一个控制按钮 指树或表格状数据格式中的动态数据 定义一个下拉列表 定义一个元素的细节原创 2017-07-15 02:46:16 · 605 阅读 · 0 评论 -
html之marquee详解
该标签不是HTML3.2的一部分,并且只支持MSIE3以后内核,所以如果你使用非IE内核浏览器(如:Netscape)可能无法看到下面一些很有意思的效果该标签是个容器标签语法:以下是一个最简单的例子:代码如下:Hello, World 下面这两个事件经常用到:onMouseOut="this.start()" :用来设置鼠标移出该原创 2017-07-15 02:37:29 · 461 阅读 · 0 评论 -
html5 的 data- 属性
发现代码中含有data-属性。之前是没有见过的,经过查资料,涨知识了。data-toggle="dropdown">刚开始我以为这仅仅是标签自定义属性,为了之后的代码使用,但继续调查看到下面的代码后,我觉得没这么简单:$(this).data('toggle')疑问1:如果是自定义属性,用jQuery的常用该属性的值得访问方式应该是这样:$(this).转载 2017-05-24 15:10:13 · 1080 阅读 · 0 评论 -
关于HTML5 data-*属性的几个坑
1、data属性不能有大写字母2、最近引用了下阿里的SUI Mobile的UI库写程序时突然data-address-id突然获取不到了,而其他页面正常。排除了其他的原因后,才意识到可能是sui.js的冲突导致。果然在其源代码中找到原来是给重写了,只能识别data后跟一个'-'的属性,而另外一个更大的问题是:属性值如果为18位的字符串,作为地址栏中的参数由于精度问题最后原创 2017-05-24 15:05:54 · 2600 阅读 · 1 评论 -
HTML5仿手机微信聊天界面
HTML5仿手机微信聊天界面,截图效果如下:源代码如下: HTML5模拟微信聊天界面 /**重置标签默认样式*/ * { margin: 0; padding: 0; list-style: none; font-family: '微软雅黑原创 2017-06-03 13:54:24 · 25388 阅读 · 2 评论 -
解决浏览器显示长数字不能自动换行或长字母不能换行的问题
在网页中,如果出现长数字或长的字母组合时,如果不加以控制,它就会破坏网页的布局,控制不好可能就会显示不全,照成显示的数据丢失。虽然这种字符串一般不会出现,但是不加以控制,被某些有心的人钻了空子,就可能破坏整个网页的布局,得不偿失,今天我就来解决下这个问题。首先看一下是什么问题:例如:1111111111111111111111111111111111111111111111原创 2017-05-18 19:39:33 · 4458 阅读 · 0 评论 -
关于<a href='javascript:function()'>的使用
这样写是为了让这个链接不要链接到新页面转而执行一段js代码。和onclick能起到同样的效果,一般来说,如果要调用脚本还是在onclick事件里面写代码,而不推荐href='javascript:function()' 这样的写法,因为href属性里面设置了js代码后,在某些浏览器下可能会引发其他不必要的事件。而且onclick事件会比href属性先执行,所以会先触原创 2017-05-02 20:00:25 · 10764 阅读 · 1 评论