CSS div在缩小时缩小

Question

我正在为我的网站的面包屑使用div。它在浏览器窗口的实际大小和放大时保持不变。但是在缩小div时会缩小。

这是我正在使用的代码。我需要在某处进行编辑吗？

<style> 

.breadcrumb { 
     list-style: none; 
     overflow: hidden; 
     font: 18px Lucida Sans Unicode; 
     text-align: center; 
} 
.breadcrumb li { 
     float: left; 

} 
.breadcrumb li a { 
     color: white; 
     text-decoration: none; 
     padding: 11px 0 11px 55px; 
     background: #327ea4;     /* fallback color */ 
     background: #327ea4; 
     position: relative; 
     display: block; 
     float: left; 
     width: 15.12em; 
     /*width: 15.1185em;*/ 
     cursor: default; 
     border-top-left-radius: .4em; 
     pointer-events: none; 
} 
.breadcrumb li a:after { 
     content: " "; 
     display: block; 
     width: 0; 
     height: 0; 
     border-top: 50px solid transparent;   /* Go big on the size, and let overflow hide */ 
     border-bottom: 50px solid transparent; 
     border-left: 30px solid #327ea4; 
     position: absolute; 
     top: 50%; 
     margin-top: -50px; 
     left: 100%; 
     z-index: 2; 
} 
.breadcrumb li a:before { 
     content: " "; 
     display: block; 
     width: 0; 
     height: 0; 
     border-top: 50px solid transparent;   /* Go big on the size, and let overflow hide */ 
     border-bottom: 50px solid transparent; 
     border-left: 30px solid white; 
     position: absolute; 
     top: 50%; 
     margin-top: -50px; 
     margin-left: 1px; 
     left: 100%; 
     z-index: 1; 
} 
.breadcrumb li:first-child a { 
     padding-left: 30px; 
} 
.breadcrumb li:nth-child(2) a  { background:  #7fc1ec; color: #327ea4; cursor: default;} 
.breadcrumb li:nth-child(2) a:after { border-left-color: #7fc1ec; color: #327ea4; cursor: default;} 
.breadcrumb li:nth-child(3) a  { background:  #7fc1ec; color: #327ea4; cursor: default;} 
.breadcrumb li:nth-child(3) a:after { border-left-color: #7fc1ec; color: #327ea4; cursor: default;} 
.breadcrumb li:nth-child(4) a  { background:  #7fc1ec; color: #327ea4; cursor: default;} 
.breadcrumb li:nth-child(4) a:after { border-left-color: #7fc1ec; color: #327ea4; cursor: default; } 
.breadcrumb li:last-child a { 
     /*background: white !important;*/ 
     /*color: black;*/ 
     pointer-events: none; 
     cursor: default; 
     border-top-right-radius: .4em; 
} 
.breadcrumb li:last-child a:after { border: 0; } 
    </style> 

<div style="width:75em;" oncontextmenu="return false" > 
    <ul class="breadcrumb"> 
     <li><a href="#">Step 1</a></li> 
     <li><a href="#">Step 2</a></li> 
     <li><a href="#">Step 3</a></li> 
        <li><a href="#">Step 4</a></li> 
    </ul> 

</div> 

在此先感谢。

当你定义元素的高度或宽度在EM的，像下面的代码片段

Answer 1

...

.breadcrumb li a { 
     color: white; 
     text-decoration: none; 
     padding: 11px 0 11px 55px; 
     background: #327ea4; 
     background: #327ea4; 
     position: relative; 
     display: block; 
     float: left; 
     width: 15.12em; /* <-- RIGHT HERE */ 
     cursor: default; 
     border-top-left-radius: .4em; 
     pointer-events: none; 
} 

...你实际上结合的元素的大小的字体 - 该元素的大小。

当您增加浏览器“缩放”时，所发生的一切正在增加字体大小（以像素为单位）。

实施例：

font-size: 10px，因此width: 2em == width: 20px。

变焦（增大字体大小）

font-size: 12px，因此width: 2emwidth: 24px ==。