Question

我有page that shows a javascript countdown。 javascript会自动填充“d”几天，“h”表示持续数小时等等...... CSS会在空格允许的情况下添加“ay（s）”，“我们的”等等，并将它们大写。< / p>

使用Javascript：

function cdtd(broadcast) {
    var nextbroadcast = new Date(broadcast);
    var now = new Date();
    var timeDiff = nextbroadcast.getTime() - now.getTime();
    if (timeDiff <= 0) {
        clearTimeout(timer);
        document.getElementById("countdown").innerHTML = "<a href=\"flconlineservices.php\">Internet broadcast in progress<\/a>";
        /* Run any code needed for countdown completion here */
    }
    var seconds = Math.floor(timeDiff / 1000);
    var minutes = Math.floor(seconds / 60);
    var hours = Math.floor(minutes / 60);
    var days = Math.floor(hours / 24);
    hours %= 24;
    minutes %= 60;
    seconds %= 60;
    document.getElementById("daysBox").innerHTML = days + " d";
    document.getElementById("hoursBox").innerHTML = hours + " h";
    document.getElementById("minsBox").innerHTML = minutes + " m";
    // seconds isn't in our html code (javascript error if this isn't commented out)
    /*document.getElementById("secsBox").innerHTML = seconds + " s";*/
    var timer = setTimeout('cdtd(broadcast)',1000);
}

CSS：

[role="navigation"] {text-transform:capitalize;}
@media screen and (min-width:1600px) {
    #countdown #daysBox:after {content:"ay(s)";}
    #countdown #hoursBox:after {content:"our(s)";}
    #countdown #minsBox:after {content:"inute(s)";}
}

Firefox和Opera按预期显示倒计时（3天，5小时等），但Internet Explorer将（s）（3天（S），5小时（S）大写（S））等等......） Safari和Chrome更糟糕，因为它们将CSS生成内容的首字母大写（3 DAy（S），5 HOur（S）等）。

我发现page that shows typography bugs with :first-letter and :first-line可能有点相关。

我尝试text-transform:lowercase然后text-transform:capitalize，但这并没有改变结果。

有关如何解决此问题的任何想法？我可能只是淘汰了大写，但是我必须确保所有内容都输入正确的外壳。

JJ

Answer 1

好的，我可以告诉你，只需要第一封日期，小时和分钟上限。你可以用javascript做到这一点。像

这样的东西

var daysString = days + " d";
document.getElementById("daysBox").innerHTML = daysString.toUpperCase();

更新：忘了提及我们的#countdown {text-transform：capitalize;}

CSS Text-Transform：大写奇怪

1 个答案: