在不同的浏览器中保持相同的div像素大小

Question

我有这个下拉菜单

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我按像素定义了所有尺寸，因为我对CSS / Html仍然很新，并且不知道替代品是否那么精确？但是，如果我现在在Firefox中打开它，那么下拉菜单似乎很好

但是一旦我在Chrome中打开它

dropup菜单的大小似乎不适合dropup项目 了。我有什么方法可以避免这种情况吗？解决这个问题？更好的选择？

我不确定在这种情况下是否需要jsfiddle（如果不是这样的话，我会感到很不舒服），但是如果它不是，那我手头有一个＃39＆＃39; ; d很有帮助，只需评论。

提前致谢！

Answer 1

你回答的是css实现taskbar-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>

让我知道它是否有效：）

Answer 2

不确定这是否是一个好的通用解决方案，但我现在完全删除了.taskbar-start-dropup中的height属性，而是给它一个5px的填充

我还给.taskbar-start-dropup-logo高度为98％

我刚才尝试使用Chrome和Firefox，它似乎工作正常，以后可以在家里试用，也许可以在其他浏览器上使用，希望这可以“

编辑：在家中使用Chrome，Firefox和Edge

以下是代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;