整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          干貨:前端開發(fā)css禁止選中文本

          Javaweb技術(shù)分享

          在我們?nèi)粘5腏ava web前端開發(fā)的過程中呢,程序員們會遇到各種各樣的要求,所以不每天學(xué)的東西感覺自己都退步了,都更不上時代的發(fā)展了。

          每天應(yīng)對各種需求,每天活在疑問中就是我們程序員的真是寫照。但我們還是一樣熱愛生活,熱愛Java,HTML ,JSP。

          在昨天的文章中,我寫了關(guān)于Javascript中null 與 undefined 的區(qū)別。好像大家都不怎么感興趣,小編感到很失落,不過,沒事,小編還是一如既往的更新,讓大家?guī)硪恍┣岸说母韶洝?/p>

          Javaweb技術(shù)分享

          今天我就來教大家一個非常實(shí)用的css小技巧----如何禁止選中文字

          直接上代碼:

          HTML代碼

          //html 代碼

          <p>

          Selectable text.

          </p>

          <p class="noselect">

          Unselectable text.

          </p>

          css 代碼

          .noselect {

          -webkit-touch-callout: none; /* iOS Safari */

          -webkit-user-select: none; /* Chrome/Safari/Opera */

          -khtml-user-select: none; /* Konqueror */

          -moz-user-select: none; /* Firefox */

          -ms-user-select: none; /* Internet Explorer/Edge */

          user-select: none; /* Non-prefixed version, currently

          not supported by any browser */

          }

          在 IE < 10 和Opera < 15中我們需要在需要禁止選中的元素上面添加一個屬性

          unselectable="on",否則可能不會生效哦~不過現(xiàn)代瀏覽器如果不是非得兼容一些老的瀏覽器也可以不加。

          感謝關(guān)注Javaweb技術(shù)分享

          東IT優(yōu)就業(yè)

          有時候,為了讓用戶有更好的體驗(yàn),需要禁用掉文本選中功能

          比如:使用a標(biāo)簽?zāi)M按鈕,如果不禁用掉文本選中功能,那么雙擊時會選中文字,用起來很不爽。

          多數(shù)情況下,只需要使用CSS樣式就可以實(shí)現(xiàn)這個功能啦:

          user-select有四個值:

          none:文本不能被選擇

          text:可以選擇文本

          all:當(dāng)所有內(nèi)容作為一個整體時可以被選擇。如果雙擊或者在上下文上點(diǎn)擊子元素,那么被選擇的部分將是以該子元素向上回溯的最高祖先元素。

          element:可以選擇文本,但選擇范圍受元素邊界的約束

          值得注意的是:IE6-9目前需要通過JavaScript來實(shí)現(xiàn)。

          更多IT精彩內(nèi)容推薦:http://www.ujiuye.com/zt/webqianduan/?wt.mc_id=17009338

          今天就來聊聊在為了您更好的體驗(yàn),本文章聊聊如何僅支持谷歌瀏覽器訪問查看頁面?這篇文章中提到的瀏覽器兼容問題,以此篇文章來證明自己并非不了解瀏覽器兼容性問題,而是當(dāng)時其他因素導(dǎo)致選擇了一刀切的方法來處理需求(我就是一個不粘鍋)。

          嘿,xdm~既然點(diǎn)進(jìn)來了,不妨就繼續(xù)看下去吧^_^

          概念

          所謂的瀏覽器兼容性問題,是指因?yàn)椴煌臑g覽器對同一段代碼有不同的解析,造成頁面顯示效果不統(tǒng)一的情況

          上面的定義就是大白話,我們來看看來自百度百科的權(quán)威解釋:瀏覽器兼容性問題又被稱為網(wǎng)頁兼容性或網(wǎng)站兼容性問題,指網(wǎng)頁在各種瀏覽器上的顯示效果可能不一致而產(chǎn)生瀏覽器和網(wǎng)頁間的兼容問題。在網(wǎng)站的設(shè)計(jì)和制作中,做好瀏覽器兼容,才能夠讓網(wǎng)站在不同的瀏覽器下都正常顯示。而對于瀏覽器軟件的開發(fā)和設(shè)計(jì),瀏覽器對標(biāo)準(zhǔn)的更好兼容能夠給用戶更好的使用體驗(yàn)。

          產(chǎn)生的原因

          造成瀏覽器兼容性問題的根本原因就是各瀏覽器使用了不同的內(nèi)核,并且它們處理同一件事情的時候思路不同。

          怎么理解上述文字?即:不同瀏覽器使用的內(nèi)核及所支持的HTML等網(wǎng)頁語言標(biāo)準(zhǔn)不同,以及用戶客戶端的環(huán)境不同(如分辨率不同)造成了顯示效果不能達(dá)到理想效果

          解決方法

          前端開發(fā)經(jīng)常需要檢查瀏覽器的兼容性,這里推薦(Can I Use)這個查詢網(wǎng)站。它是一個針對前端開發(fā)人員定制的一個查詢CSS、JS、HTML5、SVG在主流瀏覽器中特性和兼容性的網(wǎng)站,可以很好的保證網(wǎng)頁在瀏覽器中的兼容性。有了這個工具我們就可以快速地了解到代碼在各個瀏覽器中的兼容情況了,強(qiáng)烈推薦一波,大家趕緊去體驗(yàn)吧?!界面效果如下圖所示:

          工具只能給我們顯示查詢的特性在不同瀏覽器上的兼容情況,至于如何解決兼容問題還得看下述的解決辦法→

          CSS兼容問題

          1、不同瀏覽器的標(biāo)簽?zāi)J(rèn)的內(nèi)外邊距不同

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

          其實(shí)清除瀏覽器自帶的默認(rèn)樣式,每個前端開發(fā)者所用的方法大同小異,這里給出我選用的清除默認(rèn)樣式的重置樣式代碼:

          /**
           * 該文件用于清除瀏覽器樣式
           */
          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默認(rèn)樣式*/
          input, button, textarea {
              -webkit-appearance: none;
              -webkit-tap-highlight-color: rgba(255, 225, 225, 0);
              padding: 0;
              border: 0;
              outline: 0;
          }
          // 修改placeholder屬性默認(rèn)文字顏色
          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;
          }

          除了自己定義清除默認(rèn)樣式的代碼,也可選擇引用別人寫好的成熟插件Normalize.css來清除默認(rèn)樣式;

          2、圖片加a標(biāo)簽在IE9中會有邊框

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

          3、IE6及更低版本浮動元素,浮動邊雙倍邊距

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

          4、IE6及更低版本中,部分塊元素?fù)碛心J(rèn)高度

          解決方案:給元素設(shè)置font-size: 0;

          5、a標(biāo)簽藍(lán)色邊框

          解決方案: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兼容問題

          解決方案:統(tǒng)一使用{cursor: pointer;}

          10、IE6/7中img標(biāo)簽與文字放一起時,line-height失效的問題

          解決方案:文字和<img>都設(shè)置float

          11、table寬度固定,td自動換行

          解決方案:table設(shè)置 {table-layout: fixed},td設(shè)置 {word-wrap: break-word}

          12、相鄰元素設(shè)置margin邊距時,margin將取最大值,舍棄小值

          解決方案:不讓邊距重疊,可以給子元素加一個父元素,并設(shè)置該父元素設(shè)置:{overflow: hidden}

          13、a標(biāo)簽css狀態(tài)的順序

          解決方案:按照link--visited--hover--active的順序編寫

          14、IE6/7圖片下面有空隙的問題

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

          15、ul標(biāo)簽在Firefox中默認(rèn)是有padding值的,而在IE中只有margin有值

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

          16、IE中l(wèi)i指定高度后,出現(xiàn)排版錯誤

          解決方案:設(shè)置line-height

          17、ul或li浮動后,顯示在div外

          解決方案:清除浮動;須在ul標(biāo)簽后加<div style="clear:both"></div>來閉合外層div

          18、ul設(shè)置float后,在IE中margin將變大

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

          19、li中內(nèi)容超過長度時,用省略號顯示

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

          20、div嵌套p時,出現(xiàn)空白行

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

          21、IE6默認(rèn)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兼容前綴表示

          寫法

          內(nèi)核

          瀏覽器

          -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、阻止默認(rèn)行為的兼容

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

          5、添加事件監(jiān)聽器的兼容

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

          6、ajax創(chuàng)建對象的兼容

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

          7、鼠標(biāo)按鍵編碼的兼容

          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屬性,F(xiàn)irefox中與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禁止選取網(wǎng)頁內(nèi)容,在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關(guān)鍵字或var關(guān)鍵字來定義常量;在IE下,只能使用var關(guān)鍵字來定義常量

          解決方案:統(tǒng)一使用var關(guān)鍵字來定義常量

          移動端兼容問題

          1、禁止iOS識別長串?dāng)?shù)字為電話

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

          2、禁止iOS彈出各種操作窗口

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

          3、禁止Android手機(jī)識別郵箱

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

          4、禁止iOS和Android用戶選中文字

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

          5、iOS下取消input在輸入的時候英文首字母的默認(rèn)大寫

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

          6、Android下取消輸入語音按鈕

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

          7、在移動端修改難看的點(diǎn)擊的高亮效果,iOS和安卓下都有效

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

          8、iOS下input為type=button屬性disabled設(shè)置true,會出現(xiàn)樣式文字和背景異常問題

          解決方案:使用opacity=1;

          9、input為fixed定位,在iOS下input固定定位在頂部或者底部,在頁面滾動一些距離后,點(diǎn)擊input(彈出鍵盤),input位置會出現(xiàn)在中間位置

          解決方案:內(nèi)容列表框也是fixed定位,這樣不會出現(xiàn)fixed錯位的問題

          10、移動端字體小于12px使用四周邊框或者背景色塊,部分安卓文字偏上bug問題

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

          11、在移動端圖片上傳圖片兼容低端機(jī)的問題

          解決方案:input 加入屬性accept="image/*" multiple

          12、在Android上placeholder文字設(shè)置行高會偏上

          解決方案:input有placeholder情況下不要設(shè)置行高

          13、overflow: scroll或auto;在iOS上滑動卡頓的問題

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

          14、iOS中日期如:2022-02-22 00:00:00格式的時間轉(zhuǎn)時間戳不成功

          解決方案:需要將時間中的'00:00:00去除之后才能轉(zhuǎn)為時間戳'

          15、iOS中需要將時間格式轉(zhuǎn)為/,如:2022/02/22

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

          16、移動端click300ms延時響應(yīng)

          解決方案:使用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; 
          }

          至此,關(guān)于瀏覽器兼容性問題的相關(guān)知識和解決方案就聊完了,最后還穿插了關(guān)于移動端兼容的問題描述,肯定還有很多沒有總結(jié)到的兼容性問題,希望xdm在下方評論↘提供。

          看文至此,順手點(diǎn)個贊再走唄,3Q^_^

          后語

          伙伴們,如果覺得本文對你有些許幫助,點(diǎn)個或者?個關(guān)注在走唄^_^ 。另外如果本文章有問題或有不理解的部分,歡迎大家在評論區(qū)評論指出,我們一起討論共勉。


          主站蜘蛛池模板: 国产区精品一区二区不卡中文| 国产日本亚洲一区二区三区| 国产成人高清视频一区二区| 麻豆果冻传媒2021精品传媒一区下载| 久99精品视频在线观看婷亚洲片国产一区一级在线 | 国产精品第一区揄拍| 美女免费视频一区二区三区| 亚洲精品日韩一区二区小说| 久久99国产精品一区二区| 国产一在线精品一区在线观看| 性色AV一区二区三区无码| 亚洲熟妇AV一区二区三区宅男| 亚洲狠狠狠一区二区三区| 亚洲午夜精品一区二区| 亚洲一区二区三区首页| 亚洲日本va午夜中文字幕一区| 亚洲国产精品一区二区久久| 久久一区不卡中文字幕| 麻豆AV一区二区三区久久| 亚洲福利视频一区| 久久毛片一区二区| 国产精品视频一区| 国产乱码精品一区二区三区四川 | 国内国外日产一区二区| 伦理一区二区三区| 日韩一区二区电影| 日韩人妻精品无码一区二区三区| 性色A码一区二区三区天美传媒| 日韩免费视频一区二区| 国产精品高清一区二区三区不卡| 一区二区亚洲精品精华液| 无码人妻精品一区二区蜜桃 | 中文字幕无码免费久久9一区9| 激情内射亚州一区二区三区爱妻| 成人精品视频一区二区三区| 久久国产一区二区| 一本一道波多野结衣一区| 精品无码国产AV一区二区三区 | 无码av中文一区二区三区桃花岛| 春暖花开亚洲性无区一区二区 | 亚洲国产美女福利直播秀一区二区|