HTLF

一步一个脚印,走出高度...

导航

常见css属性方法

上下拉动滚动条时卡顿、慢

 body {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

禁止复制、选中文本

Element {
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
     user-select: none;
}

判断是否有某个class

  1. hasClass(‘classname’)

  2. is(‘.classname’)

jq获取元素内文本,但不包括其子元素内的文本值的方法,不包括后代

<li id="listItem">
    This is some text
    <span id="firstSpan">First span text</span>
    <span id="secondSpan">Second span text</span>
</li>
```css
有下面几种方法:

1、jq方法

$("#listitem")
    .clone()    //复制元素
    .children() //获取所有子元素
    .remove()   //删除所有子元素
    .end()  //回到选择的元素
    .text();//获取文本值
2、jq方法
```js
$("#listItem").contents().filter(function(){
  return this.nodeType == 3;
})[0].nodeValue = "The text you want to replace with"

3、js方法

document.getElementById("listItem").childNodes[0].nodeValue;

1、上下拉动滚动条时卡顿、慢

body {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}

2、禁止复制、选中文本

Element {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
解决移动设备可选中页面文本(视产品需要而定)

3、长时间按住页面出现闪退

element {
-webkit-touch-callout: none;
}

4、iphone及ipad下输入框默认内阴影

Element{
-webkit-appearance: none;
}

5、ios和android下触摸元素时出现半透明灰色遮罩

Element {
-webkit-tap-highlight-color:rgba(255,255,255,0)
}
设置alpha值为0就可以去除半透明灰色遮罩,备注:transparent的属性值在android下无效。

后面一篇文章有详细介绍,地址:http://www.haorooms.com/post/phone_web_ysk

6、active兼容处理

7、动画定义3D启用硬件加速

Element {
-webkit-transform:translate3d(0, 0, 0)
transform: translate3d(0, 0, 0);
}
注意:3D变形会消耗更多的内存与功耗

8、Retina屏的1px边框

Element{
border-width: thin;
}

9、旋转屏幕时,字体大小调整的问题

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:100%;
}

10、transition闪屏

/设置内嵌的元素在 3D 空间如何呈现:保留3D /

-webkit-transform-style: preserve-3d;

/ 设置进行转换的元素的背面在面对用户时是否可见:隐藏 /

-webkit-backface-visibility:hidden;

11、圆角bug

某些Android手机圆角失效

background-clip: padding-box;

posted on 2024-09-27 10:37  HTLF  阅读(4)  评论(0编辑  收藏  举报