浅聊常见浏览器的兼容性问题

伴随着今年10月底HTML5标准版的发布,未来使用HTML5的场景会越来越多,这是令web开发者欢欣鼓舞的事情。然而有一个现实我们不得不看清,那就是IE系列浏览器还占有一大部分市场份额,以IE8、9为主,windows8.1的用户已经用上了IE10/11,而考虑我国的国情,IE6、7依然存留不少。在我们放手用HTML5开发的时候,新特性支持度检测就是必不可少的了。一种方式是用navigator.userAgent或navigator.appName来检测浏览器类型和版本,不过这种方式不是很可靠,浏览器对于一些新特性也是在逐渐支持,不能肯定说某个浏览器100%支持了HTML5。而且,IE11做了一个恶心的举动:在UA中去掉了“MSIE”标志,把appName改为了“Netspace”,并且开始支持-webkit-前缀的css属性,这是活生生要伪装成chrome的节奏。所以,HTML5/CSS3支持性的检测,还是靠特征检测(figure
detection)或者说能力检测更好些。本篇就来介绍一下常用的检测方式都有哪些。

检测浏览器对HTML5和CSS3支持度的方法,html5css3

这篇文章主要介绍了检测浏览器对HTML5和CSS3支持度的方法,使用Modernizr来检测浏览器对HTML5和CSS3代码的兼容程度,需要的朋友可以参考下

 HTML5, CSS3 以及其他相关技术例如 Canvas、WebSocket 等等将 Web
应用开发带到了一个新的高度。该技术通过组合 HTML、CSS 和 JavaScript
可以开发出桌面应用具有的效果。尽管 HTML5 承诺很多,但现实中对 HTML5
支持的浏览器以及 HTML5
标准本身的完善程度都还没有到一个很成熟的程度。现在完全不担心浏览器支持是不现实的,还需要时间,因此当我们决定要采用
HTML5 技术开发 Web 应用的时候,我们需要对浏览器所支持的特性进行检测。

而 Modernizr 就可以帮助你完成对浏览器所支持 HTML5 特性的检查。

下面代码检测浏览器是否支持 Canvas:
 

代码如下:<script>
window.onload = function () {
if (canvasSupported()) {
alert(‘canvas supported’);
}
};

function canvasSupported() {
var canvas = document.createElement(‘canvas’);
return (canvas.getContext && canvas.getContext(‘2d’));
}
</script>

下面代码检测浏览器是否支持本地存储:
 
代码如下:
<script>
window.onload = function () {
if (localStorageSupported()) {
alert(‘local storage supported’);
}
};

function localStorageSupported() {
try {
return (‘localStorage’ in window && window[‘localStorage’] != null);
}
catch(e) {}
return false;
}
</script>

上面的两个例子中我们可以很直观的对浏览器的特性进行检查以确保我们在对应的浏览器上应用的功能能否正常运作。

而使用 Modernizr
的好处还在于你不需要这样一项项去检查,还有更简单的方法,下面我们开始:

当我第一次听到 Moderizr 这个项目时,我以为这是一个让一些老的浏览器能支持
HTML5 的 JS 库,事实上不是,它主要是检测的功能。

Modernizr 可以通过网址
来访问,该网站同时还提供一个定制脚本的功能,你可以确定你需要检测什么特性,并依此来生成相应的
JS 文件,这样可以减少不必要的 JS 代码。 
澳门新浦京电子游戏 1

澳门新浦京电子游戏, 一旦下载了 Modernizr 的 JS 文件后,就可以通过 <script>
标签引入到网页中。
 

代码如下:<script src=”Scripts/Modernizr.js”
type=”text/javascript”></script>

检测 HTML 元素

一旦我们在页面上引入了 Modernizr 后就可以立即使用,我们可以在
<html> 元素中声明不同的 CSS
类,这些类定义了所需要支持或者不支持的特性,不支持的特性其类名一般是
no-FeatureName,例如 no-flexbox。下面是一个在 chrome 上可运行的例子:

 
代码如下:
<html class=” js flexbox canvas canvastext webgl no-touch geolocation
postmessage
websqldatabase indexeddb hashchange history draganddrop websockets rgba
hsla
multiplebgs backgroundsize borderimage borderradius boxshadow textshadow
opacity
cssanimations csscolumns cssgradients cssreflections csstransforms
csstransforms3d
csstransitions fontface generatedcontent video audio localstorage
sessionstorage webworkers
applicationcache svg inlinesvg smil svgclippaths”>

还可以这样来判断浏览器是否启用了 JavaScript 支持:
 

代码如下:<html class=”no-js”>

你可以在 HTML5 Boilerplate () 或者是
Initializr ()
看到一些入门的例子,根据上面的步骤,增加 no-js
类可以判断浏览器是否启用了 JavaScript 支持。
 
使用 HTML5 和 CSS3 特性

你为 <html> 标签增加的 CSS 属性,可以直接在 CSS
中定义所需要的样式,例如:
 
代码如下:
.boxshadow #MyContainer {
border: none;
-webkit-box-shadow: #666 1px 1px 1px;
-moz-box-shadow: #666 1px 1px 1px;
}

.no-boxshadow #MyContainer {
border: 2px solid black;
}

如果浏览器支持 box-shadows 的话,将会为 <html> 元素增加 boxshadow
这个 CSS 类,否则的话就使用 no-boxshadow 这个类。这样假设浏览器不支持
box-shadow 的话,我们可以使用其他的样式来进行定义。

另外我们也可以使用 Modernizr
的对象来操作这个行为,例如下面的代码用来检测浏览器是否支持 Canvas 和
本地存储:

 
代码如下:
$(document).ready(function () {

if (Modernizr.canvas) {
//Add canvas code
}

if (Modernizr.localstorage) {
//Add local storage code
}

});

全局的 Modernizr 对象同样可用于测试 CSS3 特性是否支持:
 
代码如下:
$(document).ready(function () {

if (Modernizr.borderradius) {
$(‘#MyDiv’).addClass(‘borderRadiusStyle’);
}

if (Modernizr.csstransforms) {
$(‘#MyDiv’).addClass(‘transformsStyle’);
}

});

使用Modernizr加载脚本

在出现了浏览器不支持某些功能的的情况下,你不仅可以提供一个不错的备用方案,还可以加载shim/polyfill脚本在适当情况下填补缺失的功能
(想了解更多关于shims/polyfills的信息,请查看
).
Modernizr拥有一个内置的脚本加载器,可以用来测试一个功能,并在功能无效的时候加载另一个脚本.
脚本加载器是内置在Modernizr中的,并且是有效的独立yepnope(.
脚本加载器非常容易上手,它根据特定浏览器功能的可用性,真的会简化加载脚本的过程.

你可以使用Modernizr的load()方法来动态加载脚本,该方法接受定义被测功能的属性(test属性),
如测试成功后要加载的脚本(yep属性), 如测试失败后要加载的脚本(nope属性),
和无论测试成功还是失败都要加载的脚本(both属性).
使用load()及其属性的示例如下:
 
代码如下:
Modernizr.load({
test: Modernizr.canvas,
yep: ‘html5CanvasAvailable.js’,
nope: ‘excanvas.js’,
both: ‘myCustomScript.js’
});

在这个例子中Modernizr在加载脚本时还会测试是否支持canvas功能 .
如果目标浏览器支持HTML5 canvas就会加载html5CanvasAvailable.js脚本及
myCustomScript.js脚本 (在这个例子中使用yep属性有点牵强  –
这只是为了演示load()方法中的属性如何使用 ). 否则的话, 就会加载
excanvas.js这个 polyfill脚本来为IE9之前版本的浏览器添加功能支持 .
一旦excanvas.js被加载,myCustomScript.js也会接着被加载.

由于Modernizr会处理加载脚本, 所以你可以用它来做些别的事情. 比如,
在Google或微软提供的第三方CDN不管用的时候,你可以用Modernizr来加载本地的脚本.
Modernizr文档中提供了在CDN挂掉后提供本地jQuery后备过程的示例:
代码会先尝试从Google CND加载jQuery.
一旦脚本下载完成(或者下载失败)就会调用某个方法.
这个方法会检查jQuery对象是否有效,如果无效就加载本地的jQuery脚本.
并在其后加载一个名为needs-jQuery.js的脚本.

最后想说的是,如果你打算开发基于 HTML5 和 CSS3 的 Web 应用的话,那
Modernizr
就是你必不可少的工具,除非,除非你确认你所有客户所使用的浏览器支持你所写的代码。

这篇文章主要介绍了检测浏览器对HTML5和CSS3支持度的方法,使用Modernizr来检测浏览器对HTML5和…

前言

浏览器的兼容性问题是个很庞大复杂的问题,很难找到四海皆准的办法,这里我们只是简单介绍下几种经典的处理兼容性问题的方法。

澳门新浦京电子游戏 2

浏览器兼容问题

HTML5部分

检测HTML5新特性的方法主要有以下几种:

  1. 检查全局对象(window或navigator)上有没有相应的属性名

  2. 创建一个元素,检查元素上有没有相应的属性

3.
创建一个元素,检测元素上有没有方法名称,然后调用该方法,看能否正确执行

4.
创建一个元素,为元素的相应属性赋一个值,然后再获取此属性的值,看看赋值是否生效

由于不同浏览器的不同行为,检测一些特性的时候,可能会用到上述几个方法的组合,接下来用上面的方法做一下常用特性的检测:

一、什么是浏览器的兼容性问题

浏览器兼容性问题又被称为网页兼容性或网站兼容性问题,指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。在网站的设计和制作中,做好浏览器兼容,才能够让网站在不同的浏览器下都正常显示。而对于浏览器软件的开发和设计,浏览器对标准的更好兼容能够给用户更好的使用体验。

canvas

function support_canvas(){
    var elem = document.createElement('canvas');
    return !!(elem.getContext && elem.getContext('2d'));
}

一般来讲,创建canvas元素并检查getContext属性即可,但是在一些浏览器下不够准确,所以再检测一下elem.getContext(’2d’)的执行结果,就可以完全确定。以上代码摘自Modernizr:

关于canvas,有一点要补充的,那就是fillText方法,尽管浏览器支持canvas,我们并不能确切的确定它支持fillText方法,因为canvas
API经历了各种修改,有一些历史原因,检测支持fillText的方法如下:

function support_canvas_text(){
    var elem = document.createElement('canvas');
    var context = elem.getContext('2d');
    return typeof context.fillText === 'function';
}

二、为什么会有兼容性问题

主要原因有以下三个方面:

  • 同一产品,版本越老,bug越多

  • 同一产品,版本越新,功能越多

  • 不同产品,不同标准,不同实现方式

video/audio

function support_video(){
    return !!document.createElement('video').canPlayType;
}

function support_audio(){
    return !!document.createElement('audio').canPlayType;
}

video和audio的写法相似。

要检测video/audio支持的资源格式,可以调用canPlayType方法来进行检查,具体如下:

unction support_video_ogg(){
    var elem = document.createElement('video');
    return elem.canPlayType('video/ogg; codecs="theora"');
}
function support_video_h264(){
    var elem = document.createElement('video');
    return elem.canPlayType('video/mp4; codecs="avc1.42E01E"');
}
function support_video_webm(){
    var elem = document.createElement('video');
    return elem.canPlayType('video/webm; codecs="vp8, vorbis"');
}

function support_audio_ogg(){
    var elem = document.createElement('audio');
    return elem.canPlayType('audio/ogg; codecs="vorbis"');
}
function support_audio_mp3(){
    var elem = document.createElement('audio');
    return elem.canPlayType('audio/mpeg;');
}
function support_audio_wav(){
    var elem = document.createElement('wav');
    return elem.canPlayType('audio/wav; codecs="1"');
}

要注意的是,canPlayType的返回值并不是布尔类型,而是字符串,取值有以下几种:

  • “probably”:浏览器完全支持此格式
  • “maybe”:浏览器可能支持此格式
  • “”:空串,表示不支持

三、处理兼容性问题的思路

思路1:从产品的角度

  • 首先了解产品的受众,比如是面向年轻群体,还是面向政府或单位部门
  • 然后查询受众的浏览器比例,可以通过浏览器市场份额网站
  • 再者确定效果优先还是基本功能优先
    渐进增强(progressive enhancement):
    针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
    优雅降级 (graceful degradation):
    一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

思路2:从产品实现难度和开发成本——是否值得做

localStorage

一般来讲,检查全局对象是否有localStorage属性即可,如下:

function support_localStorage(){
    try {
        return 'localStorage' in window && window['localStorage'] !== null;
      } 
    catch(e){
        return false;
    }
}

在一些浏览器禁用cookie,或者设置了隐私模式什么的情况,检查属性或报错,所以加在try语句中,如果报错了认为不支持。

另外,还有一种更严格的检查方法,检查相应方法是否支持,如下:

function support_localStorage(){
    try {
        if('localStorage' in window && window['localStorage'] !== null){
            localStorage.setItem('test_str', 'test_str');
            localStorage.removeItem('test_str');
            return true;
        }
        return false;
    } 
    catch(e){
        return false;
    }
}

四、如何处理兼容性问题

首先我们先查阅CSS属性兼容,可以得到该css属性在目标浏览器是否兼容,如下图所示一些常见的css属性兼容性:

澳门新浦京电子游戏 3

常见css属性兼容性

1、根据兼容需求选择技术框架/库(jquery)

澳门新浦京电子游戏 4

常见js库的兼容性

2、根据兼容需求选择兼容工具(html5shiv.js、respond.js、css
reset、normalize.css、Modernizr)

  • HTML5Shiv——让 IE 6-8 支持 HTML5 标签并添加默认样式
  • respond.js——让 IE 6-8 支持 min/max-width CSS3 媒体查询。注意:
    引用 respond.js 的 <script> 标签应放在所有 CSS 文件之后。
  • css
    reset(革命派)——将浏览器的默认样式全部去掉,更准确说就是通过重新定义标签样式
  • normalize.css(改良派)——和css
    reset的用法一样,但是不再像后者那样简单粗暴的将所有的样式去掉,而是保留了一些合理的样式。他们提倡的是每个元素都有存在的意义!
  • Modernizr——Modernizr 是一个用来检测浏览器功能支持情况的 JavaScript
    库。当你在网页中嵌入Modernizr的脚本时,它会检测当前浏览器是否支持CSS3的特性,比如
    @font-face、border-radius、
    border-image等,同时也会检测是否支持HTML5的
    特性,比如audio、video、本地储存、和新的
    <input>标签的类型和属性等。在获取到这些信息的基础上,你可以在那些支持这些功能的浏览器上使用它们,来决定是否创建一个基于JS的
    fallback,或者对那些不支持的浏览器进行简单的优雅降级。如果浏览器不支持某个特性,它就为该特性对应的类名加上“no-”的前缀。

3、postCSS

postCSS可以被理解为一个平台,可以让一些插件在上面跑,它提供了一个解析器,可以将CSS解析成抽象语法树,通过PostCSS这个平台,我们能够开发一些插件,来处理CSS。热门插件如autoprefixer,它可以帮我们处理兼容问题,只需正常写CSS,autoprefixer可以帮我的自动生成兼容性代码。PostCSS的目标是通过自定义插件和工具这样的生态系统来改造CSS。与Sass和Less这些预编译器相同的原则,PostCSS把扩展的语法和特性转换成现代的浏览器友好的CSS。

4、利用CSS Hack、js 能力检测做一些修补

CSS Hack:由于不同厂商的浏览器,比如Internet
Explorer,Safari,Mozilla
Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能在不同的浏览器中也能得到我们想要的页面效果。
CSS Hack
大致有3种表现形式,CSS属性前缀法、选择器前缀法以及IE条件注释法(即HTML头部引用if
IE)Hack,
实际项目中CSS
Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。可以通过browserhacks
查 Hack 的写法。

  • 属性前缀法(即类内部Hack):例如 IE6能识别下划线 _ 和星号
    *,IE7能识别星号 *,但不能识别下划线 _,IE6~IE10都认识
    9,但firefox前述三个都不能认识。该方法不便于记忆,可以通过Autoprefixer,自动添加浏览器前缀。

.header{_width:100px;} /*ie6专用*/ 
.header{*+width:100px;} /*ie7专用*/ 
.header{*width:100px;} /*ie6,ie7共用*/ 
.header{width:100px;} /*ie8,ie9共用*/
.header{width:100px9;} /*ie6,ie7,ie8,ie9共用*/ 
.header{_width:300px9;} /*ie9专用*/
  • 选择器前缀法(即选择器Hack)
  • IE条件注释法(即HTML条件注释Hack):针对所有IE(注:IE10+已经不再支持条件注释)。这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。
    另外也可以利用X-UA-Compatible,让 IE 以最新版本的模式运行。
    <meta http-equiv=”X-UA-Compatible” content=”ie=edge”>

澳门新浦京电子游戏 5

条件注释

例如:

<!--[if lt IE 9]>
  <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]--> 

<!--[if IE 7]><html class="ie7 old-ie"><![endif]-->
<!--[if IE 8]><html class="ie8 old-ie"><![endif]-->
<!--[if IE 9]><html class="ie9"><![endif]-->
<![if !IE]><html><![endif]>

webWorker

function support_webWorker(){
    return !!window.Worker;
}

五、测试工具

  • IE 11 -> F12 开发人员工具 -> 仿真选项卡推荐
  • F2etest
    https://github.com/alibaba/f2etest
  • IEtester不支持 Win10
  • Modern.IE

applicationCache

function support_applicationCache(){
    return !!window.applicationCache;
}

geolocation

function support_geolocation(){
    return 'geolocation' in navigator;
}

input标签新属性

input标签新增的属性包括:autocomplete、autofocus、list、placeholder、max、min、multiple、pattern、required、step,检测是否支持用上面提到的方法2即可,新建一个input标签,看是否有这些属性,以autocomplete为例:

function support_input_autocomplete(){
    var elem = document.createElement('input');
    return 'autocomplete' in elem;
}

另外要特别注意list属性,因为它是与datalist标签连用的,所以检查的时候要一并检测datalist标签是否支持:

function support_input_list(){
    var elem = document.createElement('input');
    return !!('list' in elem && document.createElement('datalist') && window.HTMLDataListElement);
}

input标签新类型

这里的类型就是指type的取值,input新增的type值包括:search、tel、url、email、datetime、date、month、week、time、datetime-local、number、range、color。检测这些值需要用上面提到的方法4,以number为例:

function support_input_type_number(){
    var elem = document.createElement('input');
    elem.setAttribute('type', 'number');
    return elem.type !== 'text';
}

这是一种较为简单的检查方法,因为严格来讲,浏览器会为不同的类型提供不同的外观或实现,例如chrome中range类型会长这样:

澳门新浦京电子游戏 6

我们要确切的知道浏览器为该类型提供了对应的实现,才可以认为是“支持的”,要从这个方面检测是有难度的,各浏览器实现都不一。下面贴出Modernizr中的一个实现,供参考:检测email类型的实现:

function support_input_type_email(){
    var elem = document.createElement('input');
    elem.setAttribute('type', 'email');
    elem.value = ':)';
    return elem.checkValidity && elem.checkValidity() === false;
}

为email类型设置了一个非法的value,然后手动调用校验方法,如果返回false,说明浏览器提供了该类型的实现,认为是支持的。

history

history虽说是HTML4就有的,但HTML5提供了新的方法,检测方法如下:

function support_history(){
    return !!(window.history && history.pushState);
}

webgl

function support_webgl(){
    return !!window.WebGLRenderingContext;
}

postMessage

function support_postMessage(){
    return !!window.postMessage;
}

draggable

HTML5的拖拽特性:

function support_draggable(){
    var div = document.createElement('div');
    return ('draggable' in div) || ('ondragstart' in div && 'ondrop' in div);
}

webSocket

unction support_webSocket(){
    return 'WebSocket' in window || 'MozWebSocket' in window;
}

svg

function support_svg(){
    return !!document.createElementNS && !!document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect;
}

事件的支持性判断

通用方法:

检查事件的支持性,用上面提到的方法2就可以,创建一个元素,看元素上有没有对应的事件名称,下面是摘自Modernizr的实现:

isEventSupported = (function() {

      var TAGNAMES = {
        'select': 'input', 'change': 'input',
        'submit': 'form', 'reset': 'form',
        'error': 'img', 'load': 'img', 'abort': 'img'
      };

      function isEventSupported( eventName, element ) {

        element = element || document.createElement(TAGNAMES[eventName] || 'div');
        eventName = 'on' + eventName;

        // When using `setAttribute`, IE skips "unload", WebKit skips "unload" and "resize", whereas `in` "catches" those
        var isSupported = eventName in element;

        if ( !isSupported ) {
          // If it has no `setAttribute` (i.e. doesn't implement Node interface), try generic element
          if ( !element.setAttribute ) {
            element = document.createElement('div');
          }
          if ( element.setAttribute && element.removeAttribute ) {
            element.setAttribute(eventName, '');
            isSupported = is(element[eventName], 'function');

            // If property was created, "remove it" (by setting value to `undefined`)
            if ( !is(element[eventName], 'undefined') ) {
              element[eventName] = undefined;
            }
            element.removeAttribute(eventName);
          }
        }

        element = null;
        return isSupported;
      }
      return isEventSupported;
    })()

touch事件

如果仅仅是检查touch事件是否支持,就没必要写上面那么多东西了,可以简单书写如下:

function support_touch_event(){
    return !!(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch);
}

Mozilla还提供了一个媒体查询的语句用来检测touch的支持性:touch-enabled,可以在页面上插入一个带有此媒体查询的元素来判断是否支持touch事件。参考:

不过我们做移动开发一般都只考虑webkit内核了,Mozilla的方式就不写了,如果需要请参考Modernizr源码。

css3部分

通用方法

css3属性支持度的检测,主要通过上面方法提到的2和4来检查,不过我们要检查的是元素的style属性。另外一个要提的就是浏览器私有前缀,在现阶段我们用css3属性大部分是要写前缀的,因为各浏览器还未完全支持。我们用到的前缀有:-webkit-、-ms-、-o-、-moz-,至于前缀-khtml-,这是Safari早期使用的,现在基本也没有人再用它了,所以进行检测的时候就把它省去了。Modernizr移除了此前缀的检测,详见:

通用代码如下:

var support_css3 = (function() {
   var div = document.createElement('div'),
      vendors = 'Ms O Moz Webkit'.split(' '),
      len = vendors.length;

   return function(prop) {
      if ( prop in div.style ) return true;

      prop = prop.replace(/^[a-z]/, function(val) {
         return val.toUpperCase();
      });

      while(len--) {
         if ( vendors[len] + prop in div.style ) {
            return true;
         } 
      }
      return false;
   };
})();

3D变形

css3
3D变形的检测稍微复杂些,首先要支持perspective属性,其次要支持transform-style的值为preserve-3d。用方法4的方式无法检测出来,需要借助媒体查询的方式,代码如下:

function support_css3_3d(){
    var docElement = document.documentElement;
    var support = support_css3('perspective');
    var body = document.body;
    if(support && 'webkitPerspective' in docElement.style){
        var style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = '@media (transform-3d),(-webkit-transform-3d){#css3_3d_test{left:9px;position:absolute;height:3px;}}';
        body.appendChild(style);
        var div = document.createElement('div');
        div.id = 'css3_3d_test';
        body.appendChild(div);

        support = div.offsetLeft === 9 && div.offsetHeight === 3;

    }
    return support;
}

需要借助上面定义好的support_css3方法来检测perspective。

基本常用检测的就这些了,本文中一部分代码是网上搜来的,还有一部分是从Modernizr源码中抽离出来的。如文中叙述有误,欢迎指正。

在实际开发中,推荐直接使用Modernizr进行检测,它已经封装的非常漂亮了。但是如果你仅仅检测几个属性,或者不想因加载额外的库而浪费性能,就可以使用上述代码进行单个检测。

发表评论

电子邮件地址不会被公开。 必填项已用*标注