表格按鈕的div和span css樣式

我使用SO問題Gray out image with CSS?和 Disable link using css來構造一個css包裝器，它會使按鈕變灰，並且防止點擊它。我首先嚐試了一個單獨的css文件，但是這個例子使用了內聯的css樣式，並給出了相同的結果。這裏有4個按鈕：表格按鈕的div和span css樣式

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
</head> 
<body> 

    <form> 
     <span style="opacity:0.4; pointer-events: none;"> 
      <input type='submit' value='Span Inside' /> 
     </span> 
    </form> 

    <form> 
     <div style="opacity:0.4; pointer-events: none;"> 
      <input type='submit' value='Div Inside' /> 
     </div> 
    </form> 

    <div style="opacity:0.4; pointer-events: none;"> 
     <form> 
      <input type='submit' value='Div Outside' /> 
     </form> 
    </div> 

    <span style="opacity:0.4; pointer-events: none;"> 
     <form> 
      <input type='submit' value='Span Outside' /> 
     </form> 
    </span> 

</body> 
</html>

在這個例子中所有四個按鈕不以任何火狐15.0.1和Safari 6.0或Chrome 21.0.1180.89，這是我所期待的響應點擊。

在Firefox中，所有4個按鈕都是灰色的，不透明度爲0.4，這是我的預期。

在Safari和Chrome中，前3個按鈕呈灰色，但第4個按鈕與表單元素之外的span元素具有不透明度1.0。

請問瀏覽器有問題，還是請我理解？

來源

2012-09-25 emrys57

跨度上的輸入域或按鈕只允許措辭上下文裏面。它不應該允許嵌套的表單元素，正如你所看到的，每個瀏覽器的行爲可能不同 – fcalderan

標記不符合標準，所以當瀏覽器強制你的標記變成無效的表單時，你不應該感到驚訝。例如，Firefox的老版本也用於這樣做。 – Neil

感謝您的解釋。所以，如果我想圍繞任意內容包裝一個樣式，並且不插入換行符，我應該寫

emrys57

如果您tryig禁用的形式，那麼你應該使用the disabled attribute

來源

2012-09-25 11:02:02

是的，但中間的窗體實際上是由我無法修改的函數創建的，並以字符串形式呈現給我。我可以對字符串進行文本處理，但這有點不可預測。所以我用一種風格來包裝表單。 – emrys57

您的表單被附加到DOM後，您可以通過編程方式通過javscript設置禁用的屬性。 –

表格按鈕的div和span css樣式

回答

相關問題