Question

我正在为设备的Web UI构建“系统健康”屏幕。部分原因是显示电源电压的一组仪表。仪表由一堆“内联块”div构成。它们是基于JSON描述（阈值级别，阅读，标题等）构建的客户端，但我不相信这会对我的问题产生任何影响，因为我可以使用静态HTML重现它。通过更改.needle元素的“top”属性，可以实时更新读数。仪表分为7段：良好和高/低警告，危急，致命。只要它们是对称的，一切看起来都很好。如果我重新排列事物以使我的测量值为零，则低致命频带正确地扩展以一直延伸到零。不必要的副作用是整个指标通过低致命和高致命的高度差异向下偏移页面。

以下代码是问题的独立演示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <!-- IMPORTANT - After any changes, check this against the w3c validator:
         http://validator.w3.org/#validate_by_upload
         Anything other than a clean pass is not acceptable!
    //-->
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
        <title>WTF?!?</title>
        <style type="text/css">


            .gaugeset {
                background          : #f8f8f8;
                font-family         : sans-serif;
                font-size           : 70%;

                border              : thin solid #ccc;
                display             : inline-block;
                text-align          : center;
            }

            .gauge {
                background          : #f0f0f0;
                font-family         : sans-serif;

                border              : thin solid #ccc;

                margin              : 7px;
                display             : inline-block;
                border              : thin solid black;
            }

            .gauge > h1 {
                background          : white;
                font-size           : 120%;
                text-align          : center;

                -webkit-border-radius: 5px 5px 0px 0px;
                -moz-border-radius  : 5px 5px 0px 0px;
                border-radius       : 5px 5px 0px 0px;

                margin              : 0px;
                padding-left        : 7px;
                padding-right       : 7px;
            }

            .readout {
                display             : inline-block;
                height              : 180px;
                width               : 24px;
                margin              : 7px;
                margin-left         : 27px;
                margin-right        : 45px;
                border              : thin solid #ccc;
            }

            .fatal {
                background              : #ff7f7f;
                height                  : 10%;
            }

            .critical {
                height                  : 10%;
                background              : #ffbf7f;
            }

            .warn {
                height                  : 10%;
                background              : #ffff7f;
            }

            .good {
                height                  : 40%;
                background              : #c0ffc0;
            }

            #asymetric .fatal {
                height                  : 18px;
            }

            #asymetric .critical {
                height                  : 22px;
            }

            #asymetric .warn {
                height                  : 6px;
            }

            #asymetric .good {
                height                  : 19px;
            }

            #asymetric #special {
                height                  : 87px;
            }

            .needle {
                position                : relative;
                left                    : 27px;
                top                     : 45px;
                line-height             : 0;                    /* So that the tip of the arrow is where we want it */
            }

            /* The text to the left that marks the transitions between zones */
            .marker {
                position                : relative;
                right                   : 29px;
                text-align              : right;
                line-height             : 0;
                font-size               : 70%;
            }

        </style>
    </head>
    <body>
        <div class="gaugeset">
            <div class="gauge">
                <h1>1.0V</h1>
                <div class="readout" id="asymetric">
                    <div class="needle">&#9664&nbsp;-.--V</div>
                    <div class="fatal"></div><div class="marker">1.4v</div>
                    <div class="critical"></div><div class="marker">1.3v</div>
                    <div class="warn"></div><div class="marker">1.2v</div>
                    <div class="good"></div><div class="marker">0.8v</div>
                    <div class="warn"></div><div class="marker">0.7v</div>
                    <div class="critical"></div><div class="marker">0.6v</div>
                    <div class="fatal" id="special"></div>
                </div>
            </div>
            <div class="gauge">
                <h1>1.0V</h1>
                <div class="readout">
                    <div class="needle">&#9664&nbsp;-.--V</div>
                    <div class="fatal"></div><div class="marker">1.4v</div>
                    <div class="critical"></div><div class="marker">1.3v</div>
                    <div class="warn"></div><div class="marker">1.2v</div>
                    <div class="good"></div><div class="marker">0.8v</div>
                    <div class="warn"></div><div class="marker">0.7v</div>
                    <div class="critical"></div><div class="marker">0.6v</div>
                    <div class="fatal"></div>
                </div>
            </div>
        </div>
    </body>
</html>

我已经全身心投入使用Firebug在视觉上检查元素并检查计算出的高度，顶部等但没有成功。不对称仪表中的某些东西正在“阻碍”并破坏预期的文档流程。它是什么？

Answer 1

您需要将vertical-align: top添加到.gauge，因为它有display: inline-block。

阅读本文，特别是关于“基线”的部分，以了解为什么vertical-align很重要：http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

一般情况下，每当您使用inline-block时，都应考虑设置vertical-align（除非您对默认的baseline感到满意。）

您可以在此处查看vertical-align与inline-block的常见值的比较：http://www.brunildo.org/test/inline-block.html

在某些情况下识别div的不需要的垂直位移的来源

1 个答案: