一些问题及解决办法——页面篇

1. css的引入顺序可能改变页面的显示效果,甚至可能引起页面乱码。

2. 当所有文件引入没问题且路径没错误但字体图标不显示时,可引入网上的路径,href='http.....'

3. type = checkbox时复选框不显示,解决方法:加appearance:checkbox!important;

4. textarea在页面上可以随着拖动改变大小,解决办法:css中加:resize:none;

5. Opacity属性在ie8不兼容解决:添加css属性:filter:Alpha(Opacity=50);//100为不透明,0为全透明,所以不能用animate函数添加filter的渐变效果;

6. 无论几行文字都能水平垂直居中:.middle-box{display:table;height:xxpx;}.middle-inner{display:table-cell;text-align:center;vertical-align:middle;}如:<div class=”middle-box”><div class=”middle-inner”><p>666666</p></div></div>

7. 文字之间的距离:如lable的两个字与四个字上下对齐,给两个字的加:letter-spacing:1em;

8. line-height与高度相等但文字没有垂直居中时,在css中加上overflow:hidden;是为了防止内容超出容器或产生自动换行。

9. 在iPhone与iPad上页面展示中有电话号码时会被自动解析成蓝色,解决办法:加上<meta name=”format-detection” content=”telephone=no”>

10. 在iphone手机中若在头部或底部fixed定位,会出现掉落,当触摸屏幕时又恢复正常位置,解决方法:给其他同级元素也加上fixed定位

11. Ie8不兼容媒介查询,解决办法:在所有css引入后面引入respond.min.js文件。

12. ss3新特性:黏性定位position:sticky;

13. 当元素子元素没有包含在父元素里面时或父元素高度为0时,给父级元素加属性:overflow:hidden;

14. 想用css去除table单元格间隙时,table{border-collapse:collapse;}

15. Input框点击时会出现蓝边,解决办法:给css加border:0;outline:none;

16. overflow:hidden;失效时,给溢出元素的某祖先元素加:position:relative;

17. select框禁止选择,方法:disabled="disabled"。如:<select name="" disabled="disabled">

18. 有手机号码时可以用a标签写,点击可拨打。写法:<a href=”tel:15010551619”>15010551619</a>

19. Table的cellspaing及cellpadding的css控制方法:  table{border:0;margin:0;border-collapse:collapse;} table th, table td{padding:0};

20. input框获取焦点时,弹出键盘是数字键盘的方法:把input的type设置为number

21. css使select内的文字居右的方法:direction: rtl;

22. 垂直居中可以使用-webkit-transform:translateY(-50%)。

23. css文字超出显示省略号:容器宽度确定+overflow: hidden;text-overflow:ellipsis;white-space: nowrap;

24. 带边框的小三角实现方法:

(1)、用border写:height:0;width:0;border:6px solid transparent;border-left-color:red; 

(2)、用小正方形写:width:6px;height:6px;border:1px solid transparent;transform: rotate(45deg);border-bottom-color: red;border-left-color: red;这种方法是把小正方形旋转,然后把另一半用别的东西遮住或者直接看不出来;

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,682评论 1 92
  • (注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!)(注2:更多内容请查看我的目录。) ...
    love丁酥酥阅读 9,816评论 2 5
  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 8,384评论 0 11
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,688评论 32 459
  • 我一直认为把自己的感受放在第一位,不是自私,而是智慧。 尊重内心的感受也就是要学会爱自己。 通常会在别人劝告我们该...
    Ray丶阅读 4,974评论 0 0