整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

前端开发中常见的浏览器兼容性问题及解决方案大汇总

今天就来聊聊在为了您更好的体验,本文章聊聊如何仅支持谷歌浏览器访问查看页面?这篇文章中提到的浏览器兼容问题,以此篇文章来证明自己并非不了解浏览器兼容性问题,而是当时其他因素导致选择了一刀切的方法来处理需求(我就是一个不粘锅)。

嘿,xdm~既然点进来了,不妨就继续看下去吧^_^

概念

所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况

上面的定义就是大白话,我们来看看来自百度百科的权威解释:浏览器兼容性问题又被称为网页兼容性或网站兼容性问题,指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。在网站的设计和制作中,做好浏览器兼容,才能够让网站在不同的浏览器下都正常显示。而对于浏览器软件的开发和设计,浏览器对标准的更好兼容能够给用户更好的使用体验。

产生的原因

造成浏览器兼容性问题的根本原因就是各浏览器使用了不同的内核,并且它们处理同一件事情的时候思路不同。

怎么理解上述文字?即:不同浏览器使用的内核及所支持的HTML等网页语言标准不同,以及用户客户端的环境不同(如分辨率不同)造成了显示效果不能达到理想效果

解决方法

前端开发经常需要检查浏览器的兼容性,这里推荐(Can I Use)这个查询网站。它是一个针对前端开发人员定制的一个查询CSS、JS、HTML5、SVG在主流浏览器中特性和兼容性的网站,可以很好的保证网页在浏览器中的兼容性。有了这个工具我们就可以快速地了解到代码在各个浏览器中的兼容情况了,强烈推荐一波,大家赶紧去体验吧✈!界面效果如下图所示:

工具只能给我们显示查询的特性在不同浏览器上的兼容情况,至于如何解决兼容问题还得看下述的解决办法→

CSS兼容问题

1、不同浏览器的标签默认的内外边距不同

解决方案:*{margin: 0; padding: 0;}

其实清除浏览器自带的默认样式,每个前端开发者所用的方法大同小异,这里给出我选用的清除默认样式的重置样式代码:

/**
 * 该文件用于清除浏览器样式
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    padding:0;
    margin:0;
    border:0;
    outline: 0;
    font-family: "Helvetica Neue For Number", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    word-wrap:break-word;
}
html, body {
    width: 100%;
    height: 100%;
}
a {
    text-decoration: none;
    -webkit-tap-highlight-color:rgba(255,255,255,0);
}
ul, ol {
    list-style-type: none;
}
textarea {
    resize: none;
}
/*去除input button默认样式*/
input, button, textarea {
    -webkit-appearance: none;
    -webkit-tap-highlight-color: rgba(255, 225, 225, 0);
    padding: 0;
    border: 0;
    outline: 0;
}
// 修改placeholder属性默认文字颜色
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #999;
}
input:-moz-placeholder, textarea:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #999;
}
input::-moz-placeholder, textarea::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #999;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #999;
}

除了自己定义清除默认样式的代码,也可选择引用别人写好的成熟插件Normalize.css来清除默认样式;

2、图片加a标签在IE9中会有边框

解决方案:img{border: none;}

3、IE6及更低版本浮动元素,浮动边双倍边距

解决方案:不使用margin,使用padding

4、IE6及更低版本中,部分块元素拥有默认高度

解决方案:给元素设置font-size: 0;

5、a标签蓝色边框

解决方案:a{outline: none;}

6、IE6不支持min-height属性

解决方案:{min-height: 200px; _height: 350px;}

7、IE9以下浏览器不能使用opacity

解决方案:Firefox/Chrome/Safari/Opera浏览器使用opacity;IE浏览器使用filter

opacity: 0.7; /*FF chrome safari opera*/
filter: alpha(opacity:70); /*用了ie滤镜,可以兼容ie*/

8、IE6/7不支持display:inline-block

解决方案:{display: inline-block; *display: inline;}

9、cursor兼容问题

解决方案:统一使用{cursor: pointer;}

10、IE6/7中img标签与文字放一起时,line-height失效的问题

解决方案:文字和<img>都设置float

11、table宽度固定,td自动换行

解决方案:table设置 {table-layout: fixed},td设置 {word-wrap: break-word}

12、相邻元素设置margin边距时,margin将取最大值,舍弃小值

解决方案:不让边距重叠,可以给子元素加一个父元素,并设置该父元素设置:{overflow: hidden}

13、a标签css状态的顺序

解决方案:按照link--visited--hover--active的顺序编写

14、IE6/7图片下面有空隙的问题

解决方案:img{display: block;}

15、ul标签在Firefox中默认是有padding值的,而在IE中只有margin有值

解决方案:ul{margin: 0;padding: 0;}

16、IE中li指定高度后,出现排版错误

解决方案:设置line-height

17、ul或li浮动后,显示在div外

解决方案:清除浮动;须在ul标签后加<div style="clear:both"></div>来闭合外层div

18、ul设置float后,在IE中margin将变大

解决方案:ul{display: inline;},li{list-style-position: outside;}

19、li中内容超过长度时,用省略号显示

li{
    width: 200px;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
}

20、div嵌套p时,出现空白行

解决方案:li{display: inline;}

21、IE6默认div高度为一个字体显示的高度

解决方案:{line-height: 1px;}或{overflow: hidden;}

22、在Chrome中字体不能小于10px

解决方案:p{font-size: 12px; transform: scale(0.8);}

23、谷歌浏览器上记住密码后输入框背景色为黄色

input{
    background-color: transparent !important;
}
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
    -webkit-text-fill-color: #333 !important;
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    background-color: transparent !important;
    background-image: none !important;
    transition: background-color 5000s ease-in-out 0s;
}

24、CSS3兼容前缀表示

写法

内核

浏览器

-webkit-

webkit渲染引擎

chrome/safari

-moz-

gecko渲染引擎

Firefox

-ms-

trident渲染引擎

IE

-o-

opeck渲染引擎

Opera

如:

  .box{
       height: 40px;
       background-color: red;
       color: #fff;
       -webkit-border-radius: 5px; // chrome/safari
       -moz-border-radius: 5px; // Firefox
       -ms-border-radius: 5px; // IE
       -o-border-radius: 5px; // Opera
       border-radius: 5px;
   }

JS兼容问题

1、事件对象的兼容

e = ev || window.event

2、滚动事件的兼容

scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

3、阻止冒泡的兼容

  if (e.stopPropagation) {
      e.stopPropagation();
  } else {
      e.cancelBubble=true;
  }

4、阻止默认行为的兼容

  if (e.preventDefault) {
      e.preventDefault();
  } else {
      e.returnValue = false;
  }

5、添加事件监听器的兼容

  if (target.addEventListener) {
      target.addEventListener("click", fun, false);
  } else {
      target.attachEvent("onclick", fun);
  }

6、ajax创建对象的兼容

  var xhr = null;
  if (window.XMLHttpRequest) {
      xhr = new XMLHttpRequest();
  } else {
      xhr = new ActiveXObject("Microsoft XMLHTTP");
  } 

7、鼠标按键编码的兼容

function mouse (ev) {
      var e = ev || window.event; 
      if (evt) {
          return e.button;
      } else if (window.event) {
          switch (e.button) {
              case 1: return 0;
              case 4: return 1;
              case 2: return 2;
          }
      }  
}

8、在IE中,event对象有x,y属性,Firefox中与event.x等效的是event.pageX,而event.pageX在IE中又没有

x = event.x ? event.x : event.pageX;

9、在IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcElement属性

var source = ev.target || ev.srcElement;
var target = ev.relatedTarget || ev.toElement;

10、在Firefox下需要用CSS禁止选取网页内容,在IE用JS禁止

-moz-user-select: none; // Firefox 
obj.onselectstart = function() {return false;} // IE

11、innerText在IE中能正常工作,但在FireFox中却不行

if (navigator.appName.indexOf("Explorer") > -1) {
    document.getElementById('element').innerText = "IE";
} else {
    document.getElementById('element').textContent = "Firefox";
}

12、在Firefox下,可以使用const关键字或var关键字来定义常量;在IE下,只能使用var关键字来定义常量

解决方案:统一使用var关键字来定义常量

移动端兼容问题

1、禁止iOS识别长串数字为电话

解决方案:<meta content="telephone=no" name="format-detection" />

2、禁止iOS弹出各种操作窗口

解决方案:-webkit-touch-callout:none

3、禁止Android手机识别邮箱

解决方案:<meta content="email=no" name="format-detection" />

4、禁止iOS和Android用户选中文字

解决方案:-webkit-user-select:none

5、iOS下取消input在输入的时候英文首字母的默认大写

解决方案:<input autocapitalize="off" autocorrect="off" />

6、Android下取消输入语音按钮

解决方案:input::-webkit-input-speech-button {display: none}

7、在移动端修改难看的点击的高亮效果,iOS和安卓下都有效

解决方案:* {-webkit-tap-highlight-color:rgba(0,0,0,0);}

8、iOS下input为type=button属性disabled设置true,会出现样式文字和背景异常问题

解决方案:使用opacity=1;

9、input为fixed定位,在iOS下input固定定位在顶部或者底部,在页面滚动一些距离后,点击input(弹出键盘),input位置会出现在中间位置

解决方案:内容列表框也是fixed定位,这样不会出现fixed错位的问题

10、移动端字体小于12px使用四周边框或者背景色块,部分安卓文字偏上bug问题

解决方案:可以使用整体放大1倍(width、height、font-size等等),再使用transform缩放

11、在移动端图片上传图片兼容低端机的问题

解决方案:input 加入属性accept="image/*" multiple

12、在Android上placeholder文字设置行高会偏上

解决方案:input有placeholder情况下不要设置行高

13、overflow: scroll或auto;在iOS上滑动卡顿的问题

解决方案:加入-webkit-overflow-scrolling: touch;

14、iOS中日期如:2022-02-22 00:00:00格式的时间转时间戳不成功

解决方案:需要将时间中的'00:00:00去除之后才能转为时间戳'

15、iOS中需要将时间格式转为/,如:2022/02/22

let date = '2022-02-22';
let dateStr = date.replace(/-/g, '/'); // 2022/02/22

16、移动端click300ms延时响应

解决方案:使用Fastclick

window.addEventListener( "load", function() { 
    FastClick.attach( document.body ); 
}, false );

17、移动端1px边框问题

解决方案:原先元素的border去掉,然后利用:before或者:after重做border,并transform的scale缩小一半,原先的元素相对定位,新做的border绝对定位

.border-1px{ 
    position: relative; 
    border:none; 
}

.border-1px:after{
    content: '';
    position: absolute; 
    bottom: 0;
    background: #000;
    width: 100%; 
    height: 1px;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0; 
}

至此,关于浏览器兼容性问题的相关知识和解决方案就聊完了,最后还穿插了关于移动端兼容的问题描述,肯定还有很多没有总结到的兼容性问题,希望xdm在下方评论↘提供。

看文至此,顺手点个赞再走呗,3Q^_^

后语

伙伴们,如果觉得本文对你有些许帮助,点个或者➕个关注在走呗^_^ 。另外如果本文章有问题或有不理解的部分,欢迎大家在评论区评论指出,我们一起讨论共勉。

上面gif动图所示,这是一个很炫酷的文字动画效果,文字的每个字符呈波浪式的扩散式展开。本次文章将解读如何实现这个炫酷的文字效果。

基于以上的截图效果可以分析出以下是本次要实现的主要几点:

  • 文案呈圆环状扩散开,扩散的同时文字变小
  • 文字之间的间距从中心逐个扩散开,间距变大
  • 文案呈圆环状扩散开,扩散的同时文字变大
  • 文字之间的间距从中心逐个聚拢,间距变小
  • 动画重复执行以上4个步骤

实现过程

核心代码实现需要基于 以下两个库:

Letterize.js是一个轻量级的JavaScript库,它可以将文本内容分解为单个字母,以便可以对每个字母进行动画处理。这对于创建复杂的文本动画效果非常有用。

使用Letterize.js,你可以轻松地将一个字符串或HTML元素中的文本分解为单个字母,并为每个字母创建一个包含类名和数据属性的新HTML元素。这使得你可以使用CSS或JavaScript来控制每个字母的样式和动画。

anime.js是一个强大的JavaScript动画库,它提供了一种简单而灵活的方式来创建各种动画效果。它可以用于HTML元素、SVG、DOM属性和JavaScript对象的动画。

通过使用Letterize.js以便可以对每个字母进行动画处理,再结合anime.js即可创建各种动画效果。本文不对这两个库做更多的详细介绍,只对本次特效实现做介绍,有兴趣的可以看看官网完整的使用文档。

界面布局

html就是简单的本文标签,也不需要额外的样式,只需要在外层使用flex布局将内容居中,因为本文的长度都是一样的,所以完成后的文本内容就像一个正方形。

<div>
      <div class="animate-me">
        letterize.js&anime.js
      </div>
      <div class="animate-me">
        anime.js&letterize.js
      </div>
      ......
      <div class="animate-me">
        letterize.js&anime.js
      </div>
      <div class="animate-me">
        anime.js&letterize.js
      </div>
    </div>

动画实现

  1. 初始化 Letterize.js,只需要传入 targets 目标元素,元素即是上面的 .animate-me 文本标签。返回的 letterize 是包含所有选中的 .animate-me 元素组数。
const letterize = new Letterize({
  targets: ".animate-me"
});
  1. 接下来初始化 anime 库的使用,下面的代码即创建了一个新的anime.js时间线动画。目标是Letterize对象的所有字母。动画将以100毫秒的间隔从中心开始,形成一个网格。loop: true 动画将无限循环。
const animation = anime.timeline({
  targets: letterize.listAll,
  delay: anime.stagger(100, {
    grid: [letterize.list[0].length, letterize.list.length],
    from: "center"
  }),
  loop: true
});

  1. 开始执行动画,首先设置 「文案呈圆环状扩散开,扩散的同时文字变小」,这里其实就是将字母的大小缩小。
animation
  .add({
    scale: 0.5
  })

此时的效果如下所示:

  1. 继续处理下一步动画,「文字之间的间距从中心逐个扩散开,间距变大」,这里处理的其实就是将字母的间距加大,通过设置 letterSpacing 即可,代码如下:
animation
  .add({
    scale: 0.5
  })
  .add({
    letterSpacing: "10px"
  })

此时的效果如下所示:

  1. 后面还有2个步骤,「文案呈圆环状扩散开,扩散的同时文字变大;文字之间的间距从中心逐个聚拢,间距变小」,换做上面的思路也就是将文字变大和将文字间距变小,增加相应的代码如下:
  .add({
    scale: 1
  })
  .add({
    letterSpacing: "6px"
  });

最后

本文通过 Letterize.js + Anime.js 实现了一个很炫酷的文字动画效果,文字的每个字符呈波浪式的扩散式展开和收起。anime.js还有很多的参数可以尝试,有兴趣的朋友可以尝试探索看看~

看完本文如果觉得有用,记得点个赞支持,收藏起来说不定哪天就用上啦~

参考

动画效果发布者 Wojciech Krakowiak :https://codepen.io/WojciechWKROPCE/pen/VwLePLy


原文链接:https://juejin.cn/post/7300847292974071859

是否曾经试着点击或点击一个元素(例如:按钮、链接),并且注意到只有单击该元素的特定区域,它才会响应?

必生这种情况是因为可点击区域未应用于整个元素。为了更加清楚,请参见下图,左图可点击区别(圈红部分)明显比右图的小很多,所以右图的实现用户体验会更好。

对于本文,会介绍一些事例,并通过事例演示如何增加可点击区别,提高用户体验。

WCAG准则

WCAG全称Web Content Accessibility Guidelines 网页内容无障碍浏览准则,简单的说就是为了方便残障人士(包括低视患者,盲人,聋人,学习障碍,行动不便,认知障碍....)访问Web内容而制定的相关标准,可以使网站更加人性化。

举个例子,在WCAG准则2.3.2中规定:网页不包含任何闪光超过3次/秒的内容。

用户应该能够使用台式机/笔记本电脑上的键盘以及移动设备或平板电脑上的触摸屏来操作输入。不要在移动设备屏幕上将按钮设置得太小,以免按下正确的按钮。触摸目标的最小尺寸最好至少为44 x 44像素。

费兹法则

**费兹法则(Fitts law)**是一个人机互动以及人体工程学中人类活动的模型;它预测了快速移动到目标区域所需的时间是目标区域的距离和目标区域大小的函数。

在下面的图中,我模拟了两个按钮的不同情况。在左侧,按钮更小,更远,用户需要更多的时间与它互动。在右侧,按钮大小更大,更接近于它的同级输入元素,这将使交互更容易、更快。

接着,我们再来看看一些更加真实例子。注意:记住WCAG准则费兹法则 的概念。

按钮

在需要时使用实际真实<button>(包含可点击区域)非常重要。下面的示例来自我使用的在线银行系统:

<div class="navig next" onclick="validateLogin()">Next</div>

这是上面按钮的HTML的GIF图像。我把鼠标悬停在按钮上,光标仍然是一个指针,这很好。不过,我也可以选择文本和悬停时,有一个文本光标!如果使用了正确的元素,就不会发生这种情况。

当使用HTML<button>元素时,会获得下面效果:

  • 可通过鼠标,键盘或触摸访问
  • 可以通过键盘选中
  • 有对应的 JavaScript 方法

有些元素,我们需要添加 padding,原因有二:

  • 让它更美观
  • 让它变大,这样更容易被注意到

链接

之前在做导航的时候,犯了一个错误,应该是给 a 标签添加 padding 而不是 li:

<nav>
  <ul>
    <li class="nav-item"><a href="#">Home</a></li>
    <li class="nav-item"><nav href="#">Products</nav></li>
    <li class="nav-item"><a href="#">Store</a></li>
    <li class="nav-item"><a href="#">Team</a></li>
  </ul>
</nav>

// css

.nav-item {
  padding: 12px 16px;
}

基于上面的HTML和CSS,可点击的区域将只是文本,如下图所示:

正确的方法是在a 标签本身上添加padding。请注意,默认情况下,padding 需要块元素才有效,而 a 标签是行内元素,所以可以给 a 标签设置block,inline-element或 flex。

.nav-item a {
  display: block;
  padding: 12px 16px;
}

添加了上面的样式后,可点击的效果如下:

面包屑导航

假设可点击区域如下所示:

这种体验不是很好,鼠标或手指指向屏幕上如此小的目标会比较难。在下图中,它的可点击区域更大并且更易于交互。

事例源码:https://codepen.io/shadeed/pen/PMygee

复选框和单选按钮

当存在复选框或单选按钮元素时,我希望可以单击它或关联的标签来激活/禁用它。

从用户体验的角度来看,这是难以访问和糟糕的。在 HTML 中,可以使用for属性将标签与输入框绑定在一起。

<input type="checkbox" id="option1">
<label for="option1">Option 1</label>

或者可以将输入框放置在标签内:

<label for="option1">
    Option 1
    <input type="checkbox" id="option1">
</label>

然后,在<label>元素上添加padding,以使可点击区域变大。这样,问题得以解决,整个复选框或单选按钮都是可单击的,如下图所

侧边栏

对于带有类别的页面,有时我会注意到列表链接没有扩展到其父页面的整个宽度。也就是说,可点击区域仅在文本上,如下图所示:

解决方法:

  • 删除<li>元素的 padding,并将其移动到<a>元素
  • 通过添加display: block使a标签的宽度等于其父链接的宽度。
.nav-item a {
    /*Other styles*/
    padding: 12px 16px;
    display: block;
}

添加后,如下所示:

真实案例

在最近的Twitter更新中,导航设计在可点击区域大小方面存在问题。最初,它仅与文本相关,如下面的屏幕截图所示,但他们在收到反馈后将其修复。

章节标题

在某些情况下,需要在章节标题的远端添加“查看更多”按钮或箭头。在下面的示例中,我将箭头放置在假圆中,以便可以正确地使箭头居中。

通常情况下,箭头周围的间距可以使用padding或width和height。

使用伪元素来增加可点击区域

仅通过改变元素的宽度和高度或使用padding,并不总是能够使可点击区域变大,这时候就需要伪元素救场了。

这个想法是,伪元素属于其父元素,因此当我们创建具有特定宽度和高度的伪元素时,它将充当其父元素的单击/触摸/悬停区域。

在下图中,我在菜单按钮中添加了:after伪元素:

.menu-2:after {
  content: "";
  position: absolute;
  left: 55px;
  top: 0;
  width: 50px;
  height: 50px;
  background: #e83474;
  /*Other styles*/
}

事例源码:https://codepen.io/shadeed/pen/BXXjEg?editors=0100


作者:Ahmad Shadded 译者:前端小智 来源:css-tricks

原文:https://css-tricks.com/enhancing-the-clickable-area-size/