前端页面布局常见问题/已踩过的坑大杂烩

目录

一、IE8下[图片加文字]展示时自动换行的问题
二、设置了z-index无效
三、当文字超出范围时自动补...省略号
四、实现垂直居中
五、实现无缝十字边框
六、Iphone APP Webview中 A标签失效问题
七、Iphone/Android APP Webview中 H5页面与APP如何进行数据交互
八、如何能让H5页面适应所有分辨率的手机
九、IOS iphone/ipad safari 微信浏览器在input focus弹出输入法时 position:fixed失效问题
十、如何用CSS修改HTML5 input/textarea的 placeholder的文字颜色
十一、ios中input被默认加上了圆角问题
十二、marquee标签无js实现各种文字滚动代码(适用公告)
十三、修改滚动条样式
十四、REM部局时，元素设的height与line-height在安卓浏览器中出现偏差问题
十五、在APP中，解决webview中h5样式或者js缓存问题
十六、新版的安卓版微信内置浏览器在键盘弹出时不会触发resize动作，导致遮挡住输入框问题 
十七、移动端近似解决1像素边框问题
十八、用rem设备图片背景时会出现图片边边被截情况
十九、小米4c系列，对input类型的按钮点击不了/点击没响应的问题
二十、CSS3水平阴影、竖直阴影
二十一、华为手机虚拟键盘挤压屏幕高度
二十二、微信长按识别二维码只针对img有效，图片背景无效，而且同屏有两二维码时，只能识别第一个
二十三、Flex流式部局
二十四、进度条
二十五、CSS3文字描边
二十六、去掉ios默认给input加上的圆角
二十七、CSS3背景色渐变
二十八、CSS3内发光、外发光
二十九、IOS Webview中的h5页面上除A标签外的其他dom元素要做成可点击必需加上cursor: pointer样式
三十、魅族 Webview中的h5页面获取到的屏幕宽度不准的问题
三十一、华为自带浏览器 不支持流式布局
三十二、transition动画中用left制作动画可能会出现卡卡的不流畅
三十三、像素pixel转rem和Rem转像素pixel
三十四、CSS3 :nth-child(n) 选择器和:nth-of-type() 选择器
三十五、IOS webview高度不准确把h5底部截掉/IOS APP webview中的h5页面中的fixed在底部的dom元素显示不全或者被截掉不显示问题。
三十六、兼容微信音频播放。
三十七、相邻带背景图的两个元素，用负数margin会出现背景叠加。
三十八、background-size设为100% auto时repeat背景在部分华为手机没效问题。
三十九、弹框里的滚动条滚动时，外部body也跟着滚动的问题。
四十、Rem单位设置的小圆圈在安卓手机上不圆的问题。
四十一、在ios的webview中使用fixed在顶部的内容导致下拉刷新被阻挡问题
四十二、web中弹出弹框后，要求滚动弹框内容时，背景元素不能滚动，关闭弹框后要求背景元素位置保持不变解决方案
四十三、overflow:auto及overflow:scroll的区别
四十四、H5,CSS3,js动画FPS(帧频)要达到60才不会感觉到卡
四十五、如何使用HSL(H,S,L)来设置颜色？
四十六、pointer-events，一个神奇的css属性
四十七、CSS3属性-webkit-font-smoothing字体抗锯齿渲染
四十八、white-space 属性设置按内容的空白及换行原样显示
四十九、数字badge由圆圈到圆角椭圆自动伸长技巧
五十、移动端h5页面必须重置的样式及meta设置
五十一、指定SVG元素path的渲染模式:shape-rendering
五十二、解决ios下的微信打开的页面背景音乐无法自动播放
五十三、iphoneX安全区域问题
五十四、flex-wrap: wrap相对较旧版本手机自带浏览器不换行问题如何解决？
五十五、段落缩进及字间间距样式:text-indent及letter-space
五十六、flex布局子元素在低版本安卓机上justify-content:space-between失效问题
五十七、如何解决移动端hover的问题？
五十八、写向上滚动动画时使用伪元素用作渐变透明遮罩图层时会出现底边闪烁问题
五十九、给tbody设置transform属性导致thead的z-index 无效问题?
六十、web font-size选择，web设计稿宽度通用选择
六十一、iPhoneX适配问题
六十二、ios的input属性disabled有默认样式问题，主要是透明度问题
六十三、新版微信安卓版7.0.6前端布局要注意的新问题
六十四、select、input[type=number]隐藏PC浏览器右边默认操作按钮

本文同步发布于http://www.kt5.cn/fe/2019/11/04/layouts/

部局和设计时要考虑

Flex 布局教程：实例篇

常用方式：

/**父元素**/
display: flex;
align-items: center;
justify-content: center;

display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-content: flex-start;


/**子元素**/
flex: auto;

flex: none;

weui

https://www.ui.cn/detail/218904.html

https://segmentfault.com/p/1210000012391116/read

也可以用媒体查询针对性设置

六十二、ios的input属性disabled有默认样式问题，主要是透明度问题

表单不可编辑状态-ios的input的属性设置为disabled，会造成字体颜色变灰

解决办法，设置字体颜色，并对透明度设置为1 

        input:disabled,
        input[disabled] {
          color: #000;
          -webkit-text-fill-color: $dark-gray;
          -webkit-opacity: 1;
          opacity: 1;
        }

另扩展：input默认有padding与margin，也要重设为0

六十三、新版微信安卓版7.0.6前端布局要注意的新问题

问题：做h5活动页面，一屏显示所有内容，使用绝对定位，中间有输入区域，打开输入法时，低部内容往上移把输入区域遮挡住。（新版微信特性：打开了输入法时，全屏的高度变小了）

解决方式：使用z-index。把需要强制显示的内容的z-index设大一点，以免被下面上移的内容遮挡住。

六十四、select、input[type=number]隐藏PC浏览器右边默认操作按钮

select{
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
    -o-appearance:none;
    -ms-appearance:none;
    border: 0;
} 
select::-ms-expand { 
    display: none; 
}

input[type=number] {  
    -moz-appearance:textfield;  
}  
input[type=number]::-webkit-inner-spin-button,  
input[type=number]::-webkit-outer-spin-button {  
    -webkit-appearance: none;  
    margin: 0;  
}