MozTW 討論區 • 檢視主題

所有顯示的時間為 UTC + 8 小時

CSS float問題

第 1 頁 (共 1 頁)

[ 11 篇文章 ]

列印模式	上一個主題 \| 下一個主題

發表人

內容

Alica

文章主題 : CSS float問題

發表於 : 2005-11-12, 18:36

在自己的blog玩了一下CSS，結果似乎把Firefox搞到比IE還不如了？ :shock:

見下面附件圖。CSS有送W3C驗證過語法，至少在標準顯示介面的部分應該是沒有錯誤的（handheld.css那個又不是我寫的，不干我的事 8-)

）。去bugzilla翻了一下，float相關的bug還不少，不過也看不太出來是不是已經有人提報過了。先來這邊找人幫我確認一下…… :roll:

為什麼不貼技術傳教區？因為這邊可以貼圖而那邊不行…… XD

附加檔案:

檔案註釋: 由左至右為Firefox 1.5RC1、IE6SP2、Opera 8.5。

orz.png [117.53 KiB]
被下載 693 次

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8) Gecko/20051025 Firefox/1.5

訪客

文章主題 :

發表於 : 2005-11-12, 18:43

不確定是不是 float 的問題。

把 main.css 中 img {max-width: 100%;} 拿掉就好了。

不然就是把 class="imgleft" 套在 <img /> 裏，不要放在它外面的 <span/>。

最後由訪客於 2005-11-12, 18:52 編輯，總共編輯了 1 次。

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8) Gecko/20051025 Firefox/1.5

Alica

文章主題 :

發表於 : 2005-11-12, 18:51

hemiola 寫:

不是 float 的問題。

把 main.css 中 img {max-width: 100%;} 拿掉就好了。

main.css是站台提供的不能直接刪。和這個圖相關的我把它貼出來：

代碼:

img {
   max-width:100%;
   }
img, abbr, acronym {
   border:none;
   }
.imgright, .imgleft {
   position:relative;
   display:block;
   width:48%;
   }
.post img.right, .imgright {
   clear:right;
   float:right;
   text-align:right;
   margin:10px 0 10px 10px;
   }
.post img.left, .imgleft {
   clear:left;
   float:left;
   text-align:left;
   margin:10px 10px 10px 0;
   }

這樣的話img的設定到後面會被.imgleft蓋過去；所以我是用部分自定的方式加了我自己定義的部分上去：

代碼:

.imgright, .imgleft {   width:auto ! important}
.imgright, .imgleft {   max-width: 300px ! important}

然後就變成這樣了…… :roll:

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8) Gecko/20051025 Firefox/1.5

訪客

文章主題 :

發表於 : 2005-11-12, 18:53

對不起，我改了回覆，還有其他解決方法。

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8) Gecko/20051025 Firefox/1.5

Alica

文章主題 :

發表於 : 2005-11-12, 19:05

這……系統又不是我架的，哪有那麼容易要改就改。 :lol:

而且IE跟Opera都顯示出來了不是？來看一下規格吧。會float的.imgright是掛在span上而span裡面有img，所以這個span應該是屬於floating, replaced elements。那這種span的width呢，根據規格說法是等同於inline replaced elements的width，也就是：

引言回覆:

If 'width' has a computed value of 'auto' and 'height' also has a computed value of 'auto', the element's intrinsic width is the used value of 'width', if it has one.

如果我的理解正確的話，這個span的width應該是要來自img的寬度，所以IE跟Opera的表現是正確的。

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8) Gecko/20051025 Firefox/1.5

ants

文章主題 :

發表於 : 2005-11-12, 19:14

[網站管理員]

註冊時間: 2003-07-22, 11:00
文章: 1796
來自: Sydney

Alica 寫:

為什麼不貼技術傳教區？因為這邊可以貼圖而那邊不行…… XD

Uploading files to server is open to all registered users in most sub-forums.

_________________
Netscape 9 | SillyDog701: Switch guide | Browser Archive | MozInfo701
MacCentre701 | AntBlog701
Don't steal music.

回頂端

Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/416.11 (KHTML, like Gecko) Safari/416.12

訪客

文章主題 :

發表於 : 2005-11-12, 19:45

不負責任推測：

代碼:

<a>
  <b/>
</a>
a { float: left; }
b { max-width: 100%; }

- 因為 a 設為 float，所以其寬度為能容許其子物件的最小值。假設預設為 0 好了，或是未知。
- 因為 b 設了 max-width，所以其寬度必須視其母物件也就是 a 來決定，因為 a 是 0，所以 b 也是 0。
- 因為 b 是 0，所以就沒畫出來。

從這樣來看，gecko 或許有道理。當然還是得看規格書，才知道是誰對誰錯。

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8) Gecko/20051025 Firefox/1.5

訪客

文章主題 :

發表於 : 2005-11-12, 19:51

Alica 寫:

這……系統又不是我架的，哪有那麼容易要改就改。 :lol:

引言回覆:

If 'width' has a computed value of 'auto' and 'height' also has a computed value of 'auto', the element's intrinsic width is the used value of 'width', if it has one.

如果我的理解正確的話，這個span的width應該是要來自img的寬度，所以IE跟Opera的表現是正確的。

但重點就出在 img 設了 max-width，max-width 要先去看母物件有多寬。

我當然不知道你寫 blog 時對於 html 原始碼能控制到什麼程度，如果不能自己改碼也沒辦法。用一個 class=imgleft 的 span 來包 img，似乎畫蛇添足了說。

再一個解決辦法，就是在自己的 css 裏，加上：

.imgright img, .imgleft img { max-width: none ! important}

要蓋掉 img 的 max-width 才有用。

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8) Gecko/20051025 Firefox/1.5

xacid

文章主題 :

發表於 : 2005-11-12, 20:12

註冊時間: 2004-07-03, 22:04
文章: 444

Alica 寫:

來看一下規格吧。會float的.imgright是掛在span上而span裡面有img，所以這個span應該是屬於floating, replaced elements。

span 不算replaced element 吧
http://www.w3.org/TR/CSS21/conform.html ... ed-element

回頂端

Mozilla/5.0 (X11; U; Linux i686; zh-TW; rv:1.7.11) Gecko/20050729

訪客

文章主題 :

發表於 : 2005-11-12, 20:12

http://www.w3.org/TR/CSS21/visudet.html#min-max-widths

引言回覆:

<percentage>
Specifies a percentage for determining the used value. The percentage is calculated with respect to the width of the generated box's containing block. If the containing block's width is negative, the used value is zero. If the containing block's width depends on this element's width, then the resulting layout is undefined in CSS 2.1.

css 2.1 沒定義，沒人對沒人錯。

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8) Gecko/20051025 Firefox/1.5

Alica

文章主題 :

發表於 : 2005-11-12, 20:23

原來如此，只是雞生蛋蛋生雞的問題啊。把main.css中img的max-width先用自訂取消掉，然後再重新設定.imgright/.imgleft的max-width就成了。之所以一定要找地方上max-width的原因是有時候會貼原始尺寸比較大的圖，因而不希望版面被大圖破壞。最後自訂的CSS變成這樣：

代碼:

img { max-width: none ! important}
.imgright, .imgleft { width:auto ! important}
.imgright img, .imgleft img{ max-width: 300px ! important}

看來Firefox/IE/Opera都可以照我所想的樣子解讀。

這麼說來Firefox的解讀的確不能算錯，但有沒有必要這麼「嚴謹」就是見仁見智的問題了；不少gcc2可以順利編譯的程式到gcc3就爆炸了，也是類似的情形吧？只能說IE跟Opera的解讀比較人性化囉？ 8-)

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8) Gecko/20051025 Firefox/1.5

第 1 頁 (共 1 頁)

[ 11 篇文章 ]

MozTW » 討論區首頁 » 其它 » 其他中的其他

所有顯示的時間為 UTC + 8 小時

誰在線上

正在瀏覽這個版面的使用者：沒有註冊會員和 39 位訪客

您不能在這個版面發表主題
您不能在這個版面回覆主題
您不能在這個版面編輯您的文章
您不能在這個版面刪除您的文章
您不能在這個版面上傳附加檔案

前往 :