在寫這篇之前,不得不抱怨一下....

iOS真的很搞剛耶~~~真的是會讓開發者多事的一種作業系統~~~

因為這個問題是我自己遇上的...這篇就當作給自己的一個隨筆記錄囉~~

最近剛好有一個case~是做一家公司的網站..

由於業主非常care能不能在電腦、平版、和手機上三方兼容~

他是沒有要分網頁版和行動版~~反正就是一個網站要搞定一切!

所以我在製作時就必須要在各種不同的裝置上看排版有沒有跑位.....

 

先來敘述我的問題:

這是一個產品瀏覽的頁面,這頁面因為很長,必須要有書籤的按鈕(button)

有1、2、3、4、5;假如我按了3的按鈕,畫面就會滑動到第3個區塊(以此類推..)

而這個書籤,我是用了jQuery來寫滑動與跳轉~~

<script src="jquery.min.js" language="javascript"></script>

<script language="javascript">
$(function(){

$('#按鈕名稱').click(function(){
$('html,body').animate({scrollTop:$('#div區塊ID名稱').offset().top}, 速度);
});

});

↑順便分享下我怎麼寫的,不知道我在幹嘛的就略過!因為不是此篇的重點~~
(jquery.min.js這檔案網路上抓得到)

 

然後我的書籤button是用input button套用CSS的樣式製作~

ex:

放在<body></body>之中的input button標籤~

<input name="btn" type=button class="button" id="btn">

 

因為事先早已設計好了按鈕圖案,所以必須要用CSS更改按鈕樣式!

還有,在這裡提醒一下,圖片是可以直接加連結,但是圖片是不能用來執行JavaScript和提交表單

 

所以,我只能在CSS裡設我按鈕的樣式(以下方式是按鈕會直接是image.gif這張圖的樣子)

.button {

font-size: 0;
width: 20px;
height: 20px;
border: none;
margin: 0;
padding: 0;
background: url(images/image.gif) 0 0 no-repeat;

}

 

本來以為這樣設應該完美,沒啥問題,然後就開始用各種不同的裝置和瀏覽器測試看看:

 

用電腦版的Chrome瀏覽器看(書籤按鈕正常)

INPUTBUTTON  

 

用Android手機(HTC Desire HD)的瀏覽器看(書籤按鈕正常)

INPUTBUTTON (1)  

 

但.....當我用到iPhone時....怪異的事情來了~~~

用iPhone/iPad Safari瀏覽器看(書籤按鈕不正常,出現奇怪的白邊...)

INPUTBUTTON (2)

橫的也一樣~~~~~奇怪的白邊啊~~

INPUTBUTTON (3)  

 

不信邪~~再換一台iOS測試~~~借老媽的iPad~~

還是一樣................. 可惡的白邊哪來的~~~~~~~~~~~~~~~~

INPUTBUTTON (4)    

 

這問題大概卡了我快1小時~~~整整1小時都在試一樣的事情~~~

後來上網查,找到一些國外的網站有講到(中文的找不到相關教學~~~)

 

因為有些瀏覽器本身會有一些內建的Webkit,也就是瀏覽器會有內建按鈕的樣式~~

iOS和火狐都是典型"裝會"例子!!!!!!

哇哩勒,連火狐都會這樣~~真是拍謝我N年沒用火狐了......

 

國外網站都說是要在CSS那加一行:

-webkit-appearance: none;

可是....我加了老半天~~~問題還是一樣勒!!

 

在終於想放棄的時刻~~

我把那個按鈕放大看,發現它不是白邊而是變成奇怪的圓角正方型~~

所以我莫名就想說乾脆就在CSS上把border的圓角設為0:

border-radius: 0;

 

然後~~~普天同慶!!竟然意外的成功了!!!

 

所以CSS變成這樣寫(以下為正確版本,紅字為增加的部分):

 

.button {

font-size: 0;
width: 20px;
height: 20px;
border: none;
border-radius: 0;
margin: 0;
padding: 0;
background: url(images/image.gif) 0 0 no-repeat;
-webkit-appearance: none;

}

 

現在iPhone/iPad不管如何看,它都正常了~~~~

然後也沒影響到原本就正常的裝置和瀏覽器觀看!!當然,書籤語法也不會受影響~~~~

INPUTBUTTON (5)  

INPUTBUTTON (6)

INPUTBUTTON (7)  

 

-Jouko 2013/3/28

arrow
arrow

    ECS 發表在 痞客邦 留言(2) 人氣()