錯誤值，如果設置了邊界

我有兩個DIV簡單的任務。我需要這兩個都有彩色邊框，內部div必須使用所有空間。在這裏我的代碼：錯誤值，如果設置了邊界

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<style type='text/css'> 
    .d1{ width:150px;height:150px;border:solid 10px black;background:red;} 
    .d2{ height:100%; width:100%; border:solid 20px blue; background:green;} 
</style> 
</head> 
<body> 
    <div class=d1> 
     <div class=d2>some text</div> 
    </div> 
</body> 
</html>

但瀏覽器（IE，Chrome瀏覽器）不抓我設置邊界和「申報單」與文物展示。

任何人都抓到了這個bug？

來源

2012-08-22 Akvel

而是執行此操作：

<style type='text/css'> 
    .d1{ width:110px;height:110px;border:solid 10px black;background:blue; padding: 20px;} 
    .d2{ height:100%; width:100%; background:green;} 
</style>

我想給你，你後的效果，基本上通過使用.D1背景顏色更換上.D2邊框，添加填充到.D1行動作爲種類的邊界。

如果添加任何保證金或填充，以.D2它會添加到100％的高度和寬度值，這意味着他們會溢出。

希望是有道理的。

編輯：注意我如何通過將高度和寬度減少40px來補償20像素的填充（因爲它會在左右和頂部和底部添加填充，從而獲得40px的額外寬度和高度）

來源

2012-08-22 12:10:57 efreeman

沒有必要給「寬度：100％」 :) – Chandrakant

真真的，我只是把它放在他的代碼:)誠實！ – efreeman

如果您知道寬度和父DIV的高度，可以爲孩子建立正確的風格，沒有百分比，所以這可能jsFiddle爲你做的工作。

來源

2012-08-22 12:14:31

邊框不包括在你的寬度/高度，那麼你的150×150將「成爲」有10px的邊界170x170。

兩個解決方案：

帳戶採取邊框，增加你的DIV寬度/高度
使用更多的div，而忘記了國界

這裏是一個Jsfiddle向您展示這兩種解決方案

來源

2012-08-22 12:15:01 zessx

由於您指定了邊框厚度，因此高度和寬度將不會考慮將其嵌套顯示在邊框內。解決您的問題，如果我的理解正確，你可以實現如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<style type='text/css'> 
    .d1{ width:150px;height:150px;overflow:auto;border: solid 10px black;background:red;} 
    .d2{ height:73%; width:73%;border: solid 20px blue; background:green;} 
</style> 
</head> 
<body> 
    <div class="d1"> 
     <div class="d2">some text</div> 
    </div> 
</body> 
</html>

來源

2012-08-22 12:21:52

基本上你有問題Html box model。

你可以找出數學你的自我或取決於哪些瀏覽器必須支持有新的「框上漿」的CSS這改變了盒模型是如何工作的風格。

這裏提琴顯示它如何被使用：

http://jsfiddle.net/EHUab/

來源

2012-08-22 12:30:46

錯誤值，如果設置了邊界

回答

相關問題