MozTW 討論區
https://forum.moztw.org/

CSS float問題
https://forum.moztw.org/viewtopic.php?f=8&t=11407		 第 1 頁 (共 1 頁)
發表人:  Alica [ 2005-11-12, 18:36 ]
文章主題 :  CSS float問題
在自己的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]
被下載 696 次
發表人:  訪客 [ 2005-11-12, 18:43 ]
文章主題 : 
不確定是不是 float 的問題。

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

不然就是把 class="imgleft" 套在 <img /> 裏，不要放在 它外面的 <span/>。
發表人:  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:
發表人:  訪客 [ 2005-11-12, 18:53 ]
文章主題 : 
對不起，我改了回覆，還有其他解決方法。
發表人:  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的表現是正確的。
發表人:  ants [ 2005-11-12, 19:14 ]
文章主題 : 
Alica 寫:
為什麼不貼技術傳教區？因為這邊可以貼圖而那邊不行…… XD
Uploading files to server is open to all registered users in most sub-forums.
發表人:  訪客 [ 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 或許有道理。當然還是得看規格書，才知道是誰對誰錯。
發表人:  訪客 [ 2005-11-12, 19:51 ]
文章主題 : 
Alica 寫:
這……系統又不是我架的，哪有那麼容易要改就改。 :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的表現是正確的。


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

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

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

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

要蓋掉 img 的 max-width 才有用。
發表人:  xacid [ 2005-11-12, 20:12 ]
文章主題 : 
Alica 寫:
來看一下規格吧。會float的.imgright是掛在span上而span裡面有img，所以這個span應該是屬於floating, replaced elements。

span 不算replaced element 吧
http://www.w3.org/TR/CSS21/conform.html ... ed-element
發表人:  訪客 [ 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 沒定義，沒人對沒人錯。
發表人:  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-)
第 1 頁 (共 1 頁) 所有顯示的時間為 UTC + 8 小時
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/