谷歌浏览器如何禁止某个网站的这个元素user-select: none？

来源：蜘蛛抓取(WebSpider) 时间：2022-10-04 22:33 标签： 谷歌浏览器debug

具体的可以去博客看一下?from=bky

最近两天做移动端游戏举报页面。遇到一个问题，移动端的input都不能输入了，后来发现可能是

在移动端开发中，我们有时有针对性的写一些特殊的重置，比如：

这是webkit内核浏览器下的一个bug，具体可以参考这篇文章：

阻止了用户的选择内容行为，会导致一些“内容可编辑”标签无法正常使用，比如input、testarea。

如果网站不需要阻止用户的选择内容的行为就可以使用如下样式：

所以，最好把它也加上。

上面内容大概就是 这么多。但是我一一试了，在我的代码中并没有 卵用。

后来开始用排除法去清查css样式表，发现在ios系统下面，布局方式使用的事 rem方式去布局的话，正巧，在input上面书写了rem的宽或者高。

那么恭喜你，在真机上测试是 拿不到焦点的，必须用px或者百分比去代替。

不知道有没有 其他人像我一样遇到。

他在ie下也能选中文字，但是选中其他列表，不会选中文字，原来它是在不同div中，属于不同的范围，而同事是放在同一个table中，当然会选中。
最后采用一个了方法，即oelectstart=function{return false;}，不让页面进行选择，呵呵，这是很多网站不让复制采用的方法。

7.多行文本溢出显示省略号 在WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）的页面实现比较简单，可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ；
注意：这是 一个 不规范的属 性 (unsupported WebKit property），它没有出现在 CSS 规范草案中。 -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其 他的WebKit属性。 常见结合属性： display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。

8.css中文词不断开，整体换行
关于文字的换行与不换行的问题有些特殊情况，是使用css的word-break等属性实现不了的，下面的情况就证明了：

我们想要的效果是，一个词整体换行或不换行，“兼职测试”可以都换至第二行，或者保留在第一行，而不是像现在这样，在词内断行。

如果每个词是个a标签的话，我们为它添加属性display:inline-block,效果如图：

apx:表示阴影水平向右移动像素
bpx:表示阴影垂直向下移动像素
cpx:表示阴影的模糊的尺寸
dpx:表示阴影的半径

11.对于绝对定位元素和浮动元素它们在页面上是不占位置的。

12.关于背景不显示的问题（大盒子中包含两个小盒子，左右排列。使用float后，无法给整个的大盒子加背景）

没有高度，或者是没有设置宽度长设置了浮动
非块显示标签 背景显示不全，如 span, a , i 等必须设置DISNPLAY:BLOCK属性并加上高度才可以显示背景
背景区子元素设计了浮动，背景显示不全或者不显示，须加属性overflow:hidden
设置决定定位的元素 背景不显示或者显示不全，加属性宽 高即可
总结：绝大多数是应该没有定义高度，如果高度一定不能定死，可按上面说的来解决即可

13. 网站标题前小图标的设置

css()方法获取的高度值与样式设置的值有关，所得值有单位

height()获取的值是元素在页面中的实际高度与样式设置无关。并且不带单位。

第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；
第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；
第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码。

如果该方法没有规定参数，或者参数是 false，它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变，reload() 会再次下载该文档。如果文档未改变，则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。

如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。

22.页面滑动到网页底部时执行某个事件（基于jq）
//滚动条滚动到离底部距离10的时候触发

23.路径的一些写法：

（一个网站的开发中，很多时候前端只用写一个相对路径，后台会自动补全。也是基于安全的考虑）。

24.文本框选中删除失焦后，值恢复的原值
删除事件会触发keyup事件，所以可以在keydown事件中将值保存下来。当触发 change事件时，将原值赋给文本框。

position()获取的是相对于父级定位元素的距离 。

rgba与十六位颜色互转。

28.从一个页面跳转到另一个页面，进行一系列操作后，返回到上一页面

29.快速连续点击操作的解决

//思路，如果两次点击的间隔小于500毫秒，则定义为攻击操作，不进行任何操作。否则向下执行。

30.调用ajax时返回状态是200，但是ajax走的是error函数，很可能是因为返回的数据类型，即dataType,去掉就可以。

这个函数接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素。
jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都基于这个函数，或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式（通常由 CSS 选择器组成），然后根据这个表达式来查找所有匹配的元素。

32. jquery .cookie.js 添加不进去值，有可能是因为过期时间的格式不正确。
还有就是当人工修改本地时间从将来调回来时，也可能会层cookie写不进去。

33.子元素scroll父元素容器不跟随滚动的js实现

在常规文档流中，2个或以上的块级盒模型相邻的垂直margin会被折叠。最终的margin值计算方法如下：
a、全部都为正值，取最大者；
b、不全是正值，则都取绝对值，然后用正值减去最大值；
c、没有正值，则都取绝对值，然后用0减去最大值。
注意：相邻的盒模型可能由DOM元素动态产生并没有相邻或继承关系。

36.给元素添加点击事件，只执行一次，可以在点击后将事件解除。

原因可能是该属性会造成浏览器的回流(reflow)和重绘(repaint),从而破坏了transition的动画效果。

(2)运用visibility属性来控制元素的显示和隐藏。（至于占位的问题可以通过scale(0)来解决）

据说是因为这行代码启用了硬件加速特性，所以滑动很流畅。但是这个属性也会相对耗费更多内存。在流畅的滑动效果和耗费内存之间，我选择了前者。

39.在有些安卓uc浏览器加载不出来可从以下两方面考虑：
（1）图片的大小，如果图片太大，可能会加载不出来。压缩图片，降低图片分辨率

(2) 图片的名字是否带有ad等比较容易引起误会的词，因为uc浏览器有屏蔽广告的功能，有可能会被浏览器误认为广告而屏蔽

(在uc浏览器的设置中关闭广告屏蔽看看是否受影响)。

forEach 是在第五版本里被添加到 ECMA-262 标准的；这样它可能在标准的其他实现中不存在，你可以在你调用 forEach 之前 插入下面的代码，在本地不支持的情况下使用 forEach()。该算法是 ECMA-262

在调用foreach之前，插入下面代码即可：

  1. 42.有些网页需要针对ie的不同版本浏览器使用不同的css样式的时候

    可以使用 条件注释法（ie10+ 已经不支持条件注释）

    【注意】两个--和左中括号[之间不能有空格，否则无效

    43. 使用ifrem框架做后台管理系统时，点击退出按钮，要整个页面跳转到登录页。

    44. js中输出的文字为乱码时，可用记事本打开 ， 文件/另存为 然后将下面的编码格式修改为 UTF-8。

46.在做Mini店庆活动激情耍大牌时，tab切换部分用了iscroll插件来实现混动，但是在新版谷歌手机模拟器上，鼠标滑动很卡，鼠标拖动一下，移动几相素；

问题补充，除了新版本的谷歌手机模拟器，用旧般的谷歌手机模拟器，还有手机真机测试滑动都没有问题。

47.做app下载（用a直接实现app下载时），在visual studio开发时，出现文件找不到的问题。

IIS服务器不能下载.apk文件的解决步骤：

48.在微信浏览器中app和apk格式文件被浏览器屏蔽无法下载
1.使用腾讯应用宝；2.提示用户使用浏览器打开。

49.pc排版中当设计图为1920或更大时，图片中主体元素页面居中的排版方法

1.切两套图片，一套为背景图部分，一套为主体部分，两层div，为外层元素设置为背景，no-repear center;里层元素设置宽度，margin:0 auto并加图片。

2.模仿聚划算的排版方式

实现原理是：通过margin-left:-500px; 使元素相对于外层左边对称，然后再用定位百分比，left:50% 使内层元素居中。

50.移动端软键盘出现时影响布局的解决

ios下点击输入框弹出软键盘时，布局没有大影响。
当输入框可能被软键盘压到时，在一部分安卓下却出了问题，华为自带浏览器和UC会有布局上的问题。
原因可能是因为，软键盘弹出时，改变了height，使height:100%,不能达到原来的高度。
页面加载完后，js给body一个定高。
2）以前还遇到过，移动端点击输入框时，页面向左偏移了一部分，但太久了，忘了什么浏览器了，重现不了，解决的方法是使输入框的大小居中.

51.安卓微信浏览器中当用

  1. -webkit-box-orient: vertical;布局，最后面的元素如果没有设置高度，则当页面中有文本框时，当软件盘弹出时，最下面的元素会被挤上来。
  2. 解决办法：给元素设置高度即可。所以说，布局该少的不能少，按规矩来。

我要回帖

更多关于 谷歌浏览器debug 的文章

 

随机推荐