Question

我在CSS布局中遇到问题，当浏览器缩放时，所有元素位置都会改变，我怎么能避免这个问题？我希望所有元素都以相同的比例缩放并保持其位置，或控制元素字符

这是我的css：

html
{
    border: groove 8px red;
    margin: 20px;
    position: relative;
}

.header
{
    width: 100%;
    height: 15%;
    text-align: center;
}

.container
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height:75%;
    color: white;
}

.container .input
{
    width: 49%;
    height: 100%;
    background: #000099;
    float: left;
}

.container .break
{
    width: 2%;
    height: 100%;
    background: #b8b8b8;
    float: left;
}

.container .output
{
    width: 49%;
    height: 100%;
    background: #b80000;
    float: right;
    font-size: 18pt;
    font-weight: bold;
}

.container > * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 8px;
    padding: 10px;
}

.input h3, .output h3
{
    color: white;
}

.input textarea
{
    padding: 15px;
    width: 100%;
    height: auto;
    min-height: 70%;
    font-size: 18pt;
    font-weight: bold;
    transform: none;
}

.input input[type="submit"], .input input[type="reset"]  
{
    float: right;
    margin-top: 15px;
    padding: 5px;
    font-size: 12pt;
    font-weight: bold;
    -webkit-border-radius: 8px;
}

.input input[type="submit"]:active, .input input[type="reset"]:active
{
    background: #858585;
    color: #fffccc;
}

为什么浏览器放大或缩小时元素的位置会发生变化？

0 个答案: