CSS 文本转换 :Capitalize Oddity

Question

我有一个 page that shows a javascript countdown . javascript 自动填充“d”表示天数，“h”表示小时数等...CSS 添加“ay(s)”、“our(s)”等...，在空间允许的情况下，并将它们大写。

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 Day(s), 5 Hour(s), etc...)，但 Internet Explorer 将 (s) 大写(3 Day(S), 5 Hour(S )， ETC...)。 Safari 和 Chrome 更糟，因为它们将 (s) 和 CSS 生成内容的首字母大写(3 DAy(S)、5 HOur(S) 等...)。

我找到了一个 page that shows typography bugs with :first-letter and :first-line这可能有点相关。

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

关于如何解决这个问题的任何想法？我可能会去掉大写字母，但之后我必须确保所有内容都输入了正确的大小写。

张杰

Answer 1

好的，据我所知，您只需要天、小时和分钟上限的第一个字母。您可以在 javascript 中执行此操作。有点像

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

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