1. 首頁
  2. 問答
  3. CSS：爲什麼輸入寬度：100％不能在絕對盒子中展開？

CSS：爲什麼輸入寬度：100％不能在絕對盒子中展開？

2010-03-16 60 views
1

我有2個輸入：它們都有一個width: 100%，而第二個是一個絕對的盒子：CSS：爲什麼輸入寬度：100％不能在絕對盒子中展開？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <style type="text/css"> 
      #box1 { position: absolute } 
      #box1 { background: #666 } 
      input { width: 100% } 
     </style> 
    </head> 
    <body> 
     <form> 
      <input type="text"> 
      <div id="box1"> 
       <input type="text"> 
      </div> 
     </form> 
    </body> 
</html>
  • 對符合標準的瀏覽器，width: 100%似乎對絕對內部的輸入沒有影響但是它的輸入不在絕對絕對盒子裏面。
  • 在IE7上，兩個輸入都佔用頁面的整個寬度。

兩個問題浮現在腦海中：

  • 爲什麼width: 100%有符合標準的瀏覽器沒有影響？我不得不說，IE7呈現的方式讓我感覺更加直觀。
  • 如何讓IE7呈現像其他瀏覽器的東西，如果我無法刪除width: 100%並且無法在絕對定位的框上設置寬度？

來源

2010-03-16 avernet

回答

0

position: absolute將元素從文檔流中取出。就我所知，製作position: relative時，寬度自動變爲auto。

我想你不會給＃box1一個固定的寬度（使用width屬性或座標，如left: xyz; right: xyz）或文本輸入。

如何讓IE7呈現像其他瀏覽器的東西，如果我無法刪除寬度：100％，並且無法在絕對定位的框上設置寬度？

好問題。據我所知，這種行爲沒有解決辦法。設置width: auto 應該有所幫助。

關於W3C here上position: absolute的一些理論。

來源

2010-03-16 22:57:05

0

當一個塊元素（你的div - ＃box1）被絕對定位時，它有點失去其隱含的100％寬度。這就是爲什麼輸入不能超出其容器（現在爲0寬度）的原因。

來源

2010-03-16 22:57:20

+0

「它有點失去其默認的100％寬度」的確是我觀察到的。但是規範中指定的地方在哪裏？爲什麼它會100％放鬆？ – avernet 2010-03-16 23:13:26

0

這可能聽起來很奇怪，但當您嘗試寬度時發生了什麼：98％？在過去，我發現使用100％寬度從來沒有一致的結果，但98％。

來源

2010-03-17 01:43:00 Kevin

+0

@在這種情況下，使用'width：98％'並沒有什麼區別。 – avernet 2010-03-18 21:14:22

2

嘗試使用width:102%。這是一種解決方法，但它幾乎完美。

來源

2011-09-07 09:34:53 Michael

相關問題

 相關問題