Question

我是一个n00b，所以对我很轻松。：）

现在我被卡住了，因为我需要弄清楚为什么两个命名按钮（恢复和程序）的文字颜色不是白色。按钮位于类outerdiv的div内;因此他们应该继承财产font-color: #FFFFFF。但显然他们没有这样做，因为字体仍然是黑色。

请解释纠正此问题的HTML逻辑。

代码：

<html>
<head>
    <title>my site</title>


    <style type="text/css">
        p
        {
            font-family: Arial;
            color: #FFFFFF;
        }
        #mtx_bckgd
        {
            font-family: "Courier New";
            height: 750px;
            width: 1000px;
            position: absolute;
            z-index: -1;
            background: linear-gradient(180deg, #39275b, #FFFFFF);
        }
        #mtx_bckgd > p
        {
            word-wrap: break-word;
            color: #D8D8D8;     
            overflow: hidden;
        }
        #headerbox
        {
            height: 50px;
            top: 25px;
            left: 5px;
        }
        h1
        {
            color: #FFFFFF;
            font-weight: 400;
            text-align: center;
            margin: auto;
            padding: auto;
            text-shadow: 2px 2px rgb(51,51,51);

        }
        #navbar
        {
            top: 120px;
            left: 5px;
            width: 1000px;
            height: 30px;
        }
        #uwlogo
        {
            height: 50px;
            float: left;
        }
        #JaminWEB
        {
            margin: 0px auto;
        }
        .navbutton
        {
            width: 33%;
            height: 25px;
            background-color: rgba(51,51,51,0.5);
            margin: 0px;
            padding: 0px;
        }
        #footer
        {
            top: 800px;
        }
        .outerdiv
        {
            position: absolute;
            font-family: Arial;
            width: 1000px;
            border: solid 2px #FFFFFF;
            background-color: rgba(215,169,0,0.5);
            margin: 0px;
            padding: 0px;
            font-color: #FFFFFF;
        }

    </style>
    <script type="text/javascript">
        function change_bckgd()
        {
            var bitstr = "";
            for (var i = 0; i < 4000; ++i)
                bitstr += Math.floor(Math.random() * 10) % 2 ? "0" : "1";
            document.getElementById("mtx_txt").innerHTML = bitstr;

        }

    </script>


</head>
<body>
    <div id="mtx_bckgd">
        <p id="mtx_txt"></p>
    </div>
    <div class="outerdiv" id="headerbox">
        <div id="uwlogo">
            <img src="C:\Users\XXXXXX\Desktop\uwlogo.png" height="50px">
        </div>
        <div id="JaminWEB">
            <h1>JaminWEB</h1>
        </div>

    </div>

    <div class="outerdiv" id="navbar">
        <input type="button" class="navbutton" value="Resume"/>
        <input type="button" class="navbutton" value="Programs"/>
        <input type="button" class="navbutton"/>



    <div class="outerdiv" id="footer">
        <p>Last modified: March 21st, 2014</p>
    </div>
    <script type="text/javascript">
        setInterval(change_bckgd, 200);
    </script>
</body>
</html>

Answer 1

首先，在您的.outer-div规则中，font-color不是属性，而是color。但如果你纠正了这一点，你会看到文字仍然是黑色，默认颜色。这是因为浏览器因渲染表单控件时出现问题而臭名昭着。

作为MDN says：

CSS字体和文本功能可以轻松地与任何小部件一起使用（和是的，您可以将@ font-face与表单小部件一起使用）。但是，浏览器' 行为往往不一致。默认情况下，某些小部件不会从父母那里继承font-family和font-size。还有很多浏览器使用系统默认外观。

解决此问题的最简单方法是将color:inherit;或color:white添加到.navbutton班级

<强> jsFiddle example

Answer 2

.outerdiv input[type=button]
        {
           color:#fff;
        }

Answer 3

您可以将.navbutton设置为在css中使用白色，或者添加color:inherit应该有效。正确的＆＃34;字体颜色＆＃34; CSS中的属性只是＆＃34; color＆＃34;，fyi。

示例：

.navbutton
    {
        width: 33%;
        height: 25px;
        background-color: rgba(51,51,51,0.5);
        margin: 0px;
        padding: 0px;
        color: #fff;
    }

输入不会自动继承所有父样式，因此您必须指定继承或指定所需的样式。

我的按钮的HTML文本颜色没有正确显示

3 个答案: