Question

我发现一个奇怪的问题。请看一下我试图解释问题的图片：

为什么我不知道为什么浏览器在更改视口时显示此问题。我现在知道，如果我删除“ margin：0 auto;”，对于HTML元素“ #topbox”，则不执行此操作，它会停止显示下拉菜单的不同样式，但是如何将我的HTML元素“ #topbox”放置在中间而没有css语句“ margin auto”此刻，一切都变得像css一样奇怪。

如果您想尝试一下，这里有我的HTML和CSS代码：

#topbox {
 width: 90%;
 margin: 0 auto;
 height:100px;
 border: 5px solid green;
 position: relative;
 text-align: center;
}
#ContactSymbol {
 position:absolute;
 right:15px;
 top:25px;
 width:50px;
 height:50px;
 color:white;
 font-size:20px;
 padding:7px;
 border-radius:50px;
 border: 1px solid white;
}
.dropdown-content { 
  display:none;
  position: absolute;
  right: -5px;
  top: 31px;
  background-color: #003A7E;
  border-radius: 10px 0 10px 10px;
  border: 0.5px solid #00007E;
  min-width: 268px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 0;
  font-size:0.9em;
  text-align:left;
  z-index: 1;
  cursor:default;
}
#ContactSymbol:hover .dropdown-content {
  display:block;
}
.DropdownUeberschrift {
  display:block;
  font-weight:bold;
  background:blue;
  padding:7px;
  border-radius:10px 0 0 0;
}
.DropdownEintrag {
  display:block;
  padding:8px;
  font-size:0.85em;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="test">
<title>Test</title>
</head>
<body style="background:#003A7E">
<div id="topbox">
  <div id="ContactSymbol">Phone
    <p class="dropdown-content">
	  <span class="DropdownUeberschrift">Kontakt</span>
	  <span class="DropdownEintrag">Telefon: 121768</span>
	</p>
  </div>
</div>
</body>
</html>

Answer 1

请尝试以下CSS：

<style>
#ContactSymbol{
  font-size: 100%;
}
</style>

Answer 2

看来我已经找到了解决这个奇怪问题的方法，这也许只是CSS中的一个缺点，我使用了错误的css语句“ border：0.5px solid＃00007E;”看起来0.5px是一个错误的值，因为当我写1px时，我发现问题不再发生了。

CSS奇怪的问题-浏览器宽度更改时显示不同

2 个答案: