作者 主題: firefox 3.x 的文字連結會顫抖@@  (閱讀 5794 次)

0 會員 與 1 訪客 正在閱讀本文。

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
firefox 3.x 的文字連結會顫抖@@
« 於: 2009-02-05 18:11 »
只是想讓游標移到連結上時能有一點點的動態效果
所以我在 style 加了這幾行..

代碼: [選擇]
a:link {color: blue; text-decoration: none}
a:visited {color: blue; text-decoration: none;}
a:hover {color: blue; text-decoration: none; position: relative; top: 2px;left: 2px;}

其實也都還好啦, 游標移過去連結字串會動一下
只是如果游標正好移到箭頭跟手指頭剛好要轉換的位置
問題就來了~~~~  整個文字連結就不停了抖動
游標的狀態也是箭頭跟手指頭不停的轉換

同樣的情形在 IE6 卻不會這樣
這算是FF的特殊效果...還是BUG??  ::)

micmic3

  • 俺是博士!
  • *****
  • 文章數: 1692
    • 檢視個人資料
回覆: firefox 3.x 的文字連結會顫抖@@
« 回覆 #1 於: 2009-02-06 09:12 »
因為 hover 有改位置
有點像是  hover 後改位置-> 然後就沒 hover->回復原位->hover改位置-> 沒 hover->回復原位.............
--
無窮迴圈

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
回覆: firefox 3.x 的文字連結會顫抖@@
« 回覆 #2 於: 2009-02-06 09:20 »
因為 hover 有改位置
有點像是  hover 後改位置-> 然後就沒 hover->回復原位->hover改位置-> 沒 hover->回復原位.............
--
無窮迴圈

嗯嗯~ 果然是這樣耶~~

我把那行的 top 拿掉

代碼: [選擇]
a:hover {color: blue; text-decoration: none; position: relative; left: 2px;}
就只有當游標在左邊時會抖動 ^o^

所以, 這是正常現象嘍?! (但是 IE6 不會抖耶 = =)

micmic3

  • 俺是博士!
  • *****
  • 文章數: 1692
    • 檢視個人資料
回覆: firefox 3.x 的文字連結會顫抖@@
« 回覆 #3 於: 2009-02-06 11:20 »
因為 hover 有改位置
有點像是  hover 後改位置-> 然後就沒 hover->回復原位->hover改位置-> 沒 hover->回復原位.............
--
無窮迴圈

嗯嗯~ 果然是這樣耶~~

我把那行的 top 拿掉

代碼: [選擇]
a:hover {color: blue; text-decoration: none; position: relative; left: 2px;}
就只有當游標在左邊時會抖動 ^o^

所以, 這是正常現象嘍?! (但是 IE6 不會抖耶 = =)
因為 IE6 很笨又自以為貼心聰明 :P
« 上次編輯: 2009-02-06 11:22 由 micmic3 »

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
回覆: firefox 3.x 的文字連結會顫抖@@
« 回覆 #4 於: 2009-02-06 11:22 »
因為 hover 有改位置
有點像是  hover 後改位置-> 然後就沒 hover->回復原位->hover改位置-> 沒 hover->回復原位.............
--
無窮迴圈

嗯嗯~ 果然是這樣耶~~

我把那行的 top 拿掉

代碼: [選擇]
a:hover {color: blue; text-decoration: none; position: relative; left: 2px;}
就只有當游標在左邊時會抖動 ^o^

所以, 這是正常現象嘍?! (但是 IE6 不會抖耶 = =)
因為 IE6 很笨又自以為貼心聰明

哈哈~~ 了解~~

micmic3

  • 俺是博士!
  • *****
  • 文章數: 1692
    • 檢視個人資料
回覆: firefox 3.x 的文字連結會顫抖@@
« 回覆 #5 於: 2009-02-06 11:29 »
因為 hover 有改位置
有點像是  hover 後改位置-> 然後就沒 hover->回復原位->hover改位置-> 沒 hover->回復原位.............
--
無窮迴圈

嗯嗯~ 果然是這樣耶~~

我把那行的 top 拿掉

代碼: [選擇]
a:hover {color: blue; text-decoration: none; position: relative; left: 2px;}
就只有當游標在左邊時會抖動 ^o^

所以, 這是正常現象嘍?! (但是 IE6 不會抖耶 = =)

如果是要往右推的話
代碼: [選擇]
<a><img src="spacer.gif" >aaaaa<a>
spacer.gif 是 1x1 的透明圖 hover 時一起改 spacer.gif 的 width 跟 height 應該就不會抖抖抖了

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
回覆: firefox 3.x 的文字連結會顫抖@@
« 回覆 #6 於: 2009-02-06 12:32 »
如果是要往右推的話
代碼: [選擇]
<a><img src="spacer.gif" >aaaaa<a>
spacer.gif 是 1x1 的透明圖 hover 時一起改 spacer.gif 的 width 跟 height 應該就不會抖抖抖了

嗯嗯, 這到是個方式, 不過...有太多連結要處理, 會被砍 XDD

Darkhero

  • 酷!學園 學長們
  • 俺是博士!
  • *****
  • 文章數: 3728
  • 性別: 男
    • 檢視個人資料
    • ㄚ凱隨手紀
回覆: firefox 3.x 的文字連結會顫抖@@
« 回覆 #7 於: 2009-02-06 12:57 »
會把 top 拿掉...
那 left 也拿掉呢?
希望我們的討論是為了把問題解決,而不是爭論誰對誰錯.
『灌水才是重點,發文只是順便』
『我寧可讓不會釣魚的工程師餓死,也不想讓會餓死的工程師去攪沉公司....』
Blog: http://blog.darkhero.net/
秘密基地: http://www.darkhero.net/comic/
目前服務的網站: http://www.libook.com.tw/

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
回覆: firefox 3.x 的文字連結會顫抖@@
« 回覆 #8 於: 2009-02-06 13:05 »
left 也拿掉...啊就沒有動態效果了啊  ::)

Darkhero

  • 酷!學園 學長們
  • 俺是博士!
  • *****
  • 文章數: 3728
  • 性別: 男
    • 檢視個人資料
    • ㄚ凱隨手紀
回覆: firefox 3.x 的文字連結會顫抖@@
« 回覆 #9 於: 2009-02-06 13:30 »
所以你是要連結的字會動,但是不要影響到連結的範圍?...

那試試看用 padding-left:2px;
希望我們的討論是為了把問題解決,而不是爭論誰對誰錯.
『灌水才是重點,發文只是順便』
『我寧可讓不會釣魚的工程師餓死,也不想讓會餓死的工程師去攪沉公司....』
Blog: http://blog.darkhero.net/
秘密基地: http://www.darkhero.net/comic/
目前服務的網站: http://www.libook.com.tw/

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
回覆: firefox 3.x 的文字連結會顫抖@@
« 回覆 #10 於: 2009-02-06 16:13 »
哦哦~~  的確

改用 padding-left 就影響連結範圍
當然就不會抖啊抖的了  :D :D

感謝 m(_ _)m

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
回覆: firefox 3.x 的文字連結會顫抖@@
« 回覆 #11 於: 2009-02-06 16:37 »
剛剛稍微玩了一下..

用 padding-left 時, 如果右邊有其他東西
可能會影響到排版, 讓右邊也跟著動起來

例如我有用 <TABLE> 來放資料
將 TD 寬度設定比字串長度稍微大一點點
這樣右邊就不會跟著一起動

micmic3

  • 俺是博士!
  • *****
  • 文章數: 1692
    • 檢視個人資料
回覆: firefox 3.x 的文字連結會顫抖@@
« 回覆 #12 於: 2009-02-06 16:40 »
剛剛稍微玩了一下..

用 padding-left 時, 如果右邊有其他東西
可能會影響到排版, 讓右邊也跟著動起來

例如我有用 <TABLE> 來放資料
將 TD 寬度設定比字串長度稍微大一點點
這樣右邊就不會跟著一起動
CD~~~
在 TD 內會這樣,如果沒有 nowrap 有可能會 斷行
用一個 div 包起來 <div style="over-flow:hidden;width:??px" ></div>
就沒影響了
這在剛好出界時很有用
« 上次編輯: 2009-02-06 16:49 由 micmic3 »

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
回覆: firefox 3.x 的文字連結會顫抖@@
« 回覆 #13 於: 2009-02-06 17:06 »
剛剛稍微玩了一下..

用 padding-left 時, 如果右邊有其他東西
可能會影響到排版, 讓右邊也跟著動起來

例如我有用 <TABLE> 來放資料
將 TD 寬度設定比字串長度稍微大一點點
這樣右邊就不會跟著一起動
CD~~~
在 TD 內會這樣,如果沒有 nowrap 有可能會 斷行
用一個 div 包起來 <div style="over-flow:hidden;width:??px" ></div>
就沒影響了
這在剛好出界時很有用

嗯嗯, 的確是
over-flow:hidden 右邊就不會一起動了 ^.^

感謝兩位 m(_ _)m

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
回覆: firefox 3.x 的文字連結會顫抖@@
« 回覆 #14 於: 2009-02-07 11:00 »
修正一下..

<div style="over-flow:hidden;width:??px" ></div>

改成

<div style="overflow:hidden;width:??px" ></div>

雖然 over-flow 也會有效果, 不過正確的用法應該是 overflow  ;D  ;D