保持相同的div的像素大小，不同的瀏覽器

Question

我有這個下拉菜單

.taskbar-start-dropup { 
 
\t display: none; 
 
\t position: absolute; 
 
\t bottom: 36px; 
 
\t left: 3px; 
 
\t box-shadow: -1px -1px 0px 0px #000 inset, -2px -2px 0px 0px #868A8E inset, 
 
     \t \t \t 1px 1px 0px 0px #C2C5CA inset, 2px 2px 0px 0px #FFF inset; 
 
\t background-color: #C2C5CA; 
 
\t width: 300px; 
 
\t height: 453px; 
 
\t 
 
} 
 
.taskbar-start-dropup-item { 
 
\t color: black; 
 
\t padding: 20px; 
 
\t width: 215px; 
 
\t top: 2px; 
 
\t left: 42px; 
 
\t right: 2px; 
 
\t bottom: 2px; 
 
\t position: relative; 
 
\t text-decoration: none; 
 
\t display: block; 
 
\t font-size: 12px; 
 
\t -webkit-user-select: none; 
 
\t cursor: default; 
 
} 
 
.taskbar-start-dropup-item:hover { 
 
\t background-color: blue; 
 
} 
 
.show { 
 
\t display: block; 
 
} 
 
#taskbar-start-dropup-logo { 
 
\t height: 448px; 
 
\t width: 40px; 
 
\t position: absolute; 
 
\t top: 2px; 
 
\t left: 2px; 
 
\t background-color: blue; 
 
} 
 
.taskbar-start-dropup-divider { 
 
\t height: 2px; 
 
\t width: 240px; 
 
\t margin-top: 5px; 
 
\t margin-bottom: 1px; 
 
\t margin-left: 50px; 
 
\t box-shadow: 0px -1px 0px 0px #FFF inset, 1px 1px 0px 0px #868A8E inset; 
 
}

<div id="taskbar-start-dropup" class="show taskbar-start-dropup"> 
 
\t \t <div id="taskbar-start-dropup-logo"></div> <!-- TODO: change to img --> 
 
\t \t <div class="taskbar-start-dropup-item">link 1</div> 
 
\t \t <div class="taskbar-start-dropup-item">link 2</div> 
 
\t \t \t <div class="taskbar-start-dropup-item">link 3</div> 
 
\t \t \t <div class="taskbar-start-dropup-item">link 4</div> 
 
\t \t \t <div class="taskbar-start-dropup-item">link 5</div> 
 
\t \t \t <div class="taskbar-start-dropup-item">link 6</div> 
 
\t \t <div class="taskbar-start-dropup-divider"></div> 
 
\t \t \t <div class="taskbar-start-dropup-item" id="logout">PLACEHOLDER log out</div> 
 
\t \t \t <div class="taskbar-start-dropup-item" id="shutdown">PLACEHOLDER shutdown</div> 
 
\t </div>

我通過像素定義的所有尺寸，因爲我還是很新的CSS/HTML並不知道替代方案是否確切嗎？但是，如果我在Firefox中打開它現在dropup菜單顯得精緻

但一旦我在Chrome中打開它

似乎是dropup菜單的尺寸不適合與丟失項目 了。有什麼辦法可以避免這種情況？解決這個問題？更好的選擇？

我不確定在這種情況下是否需要一個jsfiddle（如果不是這樣，我會感到不舒服），但是如果它有幫助的話，我手頭上有一個，評論。

在此先感謝！

Answer 1

不知道這是一個很好的和通用的解決方案，但我完全退出了.taskbar-start-dropup中的高度屬性，而是給它一個5px的填充

我也給.taskbar啓動-dropup-標誌的98％的高度

我在Chrome和Firefox剛纔試了，它似乎做工精細，要去嘗試在家裏以後，也許在其他瀏覽器，希望這會工作

編輯：在家工作的在Chrome，Firefox和鋒芒太

下面的代碼：

.taskbar-start-dropup { 
 
\t display: none; 
 
\t position: absolute; 
 
\t bottom: 36px; 
 
\t left: 3px; 
 
\t box-shadow: -1px -1px 0px 0px #000 inset, -2px -2px 0px 0px #868A8E inset, 
 
     \t \t \t 1px 1px 0px 0px #C2C5CA inset, 2px 2px 0px 0px #FFF inset; 
 
\t background-color: #C2C5CA; 
 
\t width: 300px; 
 
\t padding-bottom: 5px; /* removed height & added padding-bottom */ 
 
} 
 
.taskbar-start-dropup-item { 
 
\t color: black; 
 
\t padding: 20px; 
 
\t width: 215px; 
 
\t top: 2px; 
 
\t left: 42px; 
 
\t right: 2px; 
 
\t position: relative; 
 
\t text-decoration: none; 
 
\t display: block; 
 
\t font-size: 12px; 
 
\t -webkit-user-select: none; 
 
\t cursor: default; 
 
} 
 
.taskbar-start-dropup-item a{ 
 
\t text-decoration: none; 
 
\t color: black; 
 
} 
 
.taskbar-start-dropup-item:hover { 
 
\t background-color: blue; 
 
} 
 
.show { 
 
\t display: block; 
 
} 
 
#taskbar-start-dropup-logo { 
 
\t height: 98.8%; /* set height to THIS mess */ 
 
\t width: 40px; 
 
\t position: absolute; 
 
\t top: 2px; 
 
\t left: 2px; 
 
\t background-color: blue; 
 
} 
 
.taskbar-start-dropup-divider { 
 
\t height: 2px; 
 
\t width: 240px; 
 
\t margin-top: 5px; 
 
\t margin-bottom: 1px; 
 
\t margin-left: 50px; 
 
\t box-shadow: 0px -1px 0px 0px #FFF inset, 1px 1px 0px 0px #868A8E inset; 
 
}

<div id="taskbar-start-dropup" class="taskbar-start-dropup show"> 
 
\t \t <div id="taskbar-start-dropup-logo"></div> <!-- TODO: change to img --> 
 
\t \t <div class="taskbar-start-dropup-item">link 1</div> 
 
\t \t <div class="taskbar-start-dropup-item">link 2</div> 
 
\t \t \t <div class="taskbar-start-dropup-item">link 3</div> 
 
\t \t \t <div class="taskbar-start-dropup-item">link 4</div> 
 
\t \t \t <div class="taskbar-start-dropup-item">link 5</div> 
 
\t \t \t <div class="taskbar-start-dropup-item">link 6</div> 
 
\t \t <div class="taskbar-start-dropup-divider"></div> 
 
\t \t \t <div class="taskbar-start-dropup-item" id="logout">PLACEHOLDER log out</div> 
 
\t \t \t <div class="taskbar-start-dropup-item" id="shutdown"><a target="_blank" href="https://www.youtube.com/watch?v=cxVVd5fZNeo">PLACEHOLDER shutdown</a></div> 
 
\t </div>

Answer 2

你的回答是在css實現任務欄-start-dropup-item中。

.taskbar-start-dropup-item { 
    color: black; 
    padding: 20px; 
    width: 215px; 
    top: 2px; 
    left: 42px; 
    right: 2px; 
    bottom: 2px; <-- this line specifies 2px padding take it off 
    position: relative; 
    text-decoration: none; 
    display: block; 
    font-size: 12px; 
    -webkit-user-select: none; 
    cursor: default; 
} 

或者：

您可以指定這種形式的內部HTML造型：

<div class="taskbar-start-dropup-item" id="shutdown" style="bottom: 0px;">PLACEHOLDER shutdown</div> 
     </div> 

讓我知道，如果它的工作原理:)