Javascript webgrid的CSS修复程序'；使用Razor和MVC3的s寻呼机方法

我将MVC3与Razor一起使用，对于显示网格，我将使用WebGrid，对于这个网格的分页，我将使用以下代码

我的问题：页面按钮在选择/单击和未选择/单击时应保持相同的大小。

我有一些css问题，我使用css和javascript来实现我的客户想要的设计，我在fiddle链接上复制了它

剃须刀代码

@grid.Pager(mode: WebGridPagerModes.All, numericLinksCount: 15, firstText: "<<", lastText: ">>", previousText: "<", nextText: ">")

我使用过的Javascript代码

    var keywords = ['>>', '<<', '<', '>'];

    function linklabels() {

        var footerDiv = document.getElementById('footer');
        var oldLinks = footerDiv.getElementsByTagName('A');

        var oldLinksCount = oldLinks.length;
        var keywordsCount = keywords.length;

        for (var i = 0; i < oldLinks.length; i++) {

            if (oldLinks[i].firstChild.nodeValue == '>>' || oldLinks[i].firstChild.nodeValue == '<<' || oldLinks[i].firstChild.nodeValue == '>' || oldLinks[i].firstChild.nodeValue == '<') {
                var my_div = null;
                var newDiv = null;

                var newDiv = document.createElement("span");
                var newContent = document.createTextNode(oldLinks[i].firstChild.nodeValue);
                newDiv.appendChild(newContent);
                newDiv.className = "whiteBox";

                oldLinks[i].firstChild.nodeValue = "";

                oldLinks[i].appendChild(newDiv);
            }
            else {
                var my_div = null;
                var newDiv = null;

                var newDiv = document.createElement("span");
                var newContent = document.createTextNode(oldLinks[i].firstChild.nodeValue);
                newDiv.appendChild(newContent);
                newDiv.className = "blackBox";

                oldLinks[i].firstChild.nodeValue = "";

                oldLinks[i].appendChild(newDiv);
            }

        } // end of for

        //  footer

    }
    window.onload = linklabels; 

---

var keywords=['>>，''| | oldLinks[i].firstChild.nodeValue=='所选数字显示时不带换行元素，因此以内联方式呈现

尝试将其包装在span标记中，如下所示：

我已经将所选的数字包装在一个跨度中，其中包含所选的类，该类与blackbox类共享相同的规则，只是具有透明的背景和黑色文本颜色

我不会说这是一个CSS问题，而是一个标记问题。所选页面指示器没有任何宽度或高度，不能设置样式，因为它只是文本

建议：要么更改标记，要么用javascript拆分#页脚的innerHTML并从那里开始工作。我会选择第一个选项。
正如我在评论中所说

不要试图治愈症状。在你的情况下，CSS修复不会起作用，因为

不过，jquery的快速修复可能会解决这个问题：

$(function() {  
 $("#footer").contents().filter(function() {

     var $this = $(this);
     return $this.children().length == 0 && $.trim($this.text()).length > 0;

 }).wrap("<span class='selectedBox' />");       
});   

$（函数（）{
$（“#页脚”）.contents（）.filter（函数（）{
var$this=$（this）；
返回$this.children（）.length==0&&$.trim（$this.text（））.length>0；
}).wrap（“”）；
});   

这将用一个span和class selectedBox包装您的单个文本元素，您必须为其添加一些css。

更新
这也将替换您的linklabels javascript代码：

function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

$(function() {  
 $("#footer a").contents().wrap("<span class='blackBox' />");
 $("#footer").find("a span").each(function(){
    var val = $.trim($(this).text());
    if (!isNumber(val))
       $(this).attr('class', 'whiteBox');      
  });    

 $("#footer").contents().filter(function() {

     var $this = $(this);
     return $this.children().length == 0 && $.trim($this.text()).length > 0;

 }).wrap("<span class='whiteBox' />");       
}); 

函数isNumber（n）{
return！isNaN（parseFloat（n））和&isFinite（n）；
}
$（函数（）{
$（“#页脚a”）.contents（）.wrap（“”）；
$（“#footer”）.find（“一个span”）.each（函数（）{
var val=$.trim（$（this.text（））；
如果（！isNumber（val））
$（this.attr（'class'，'whiteBox'）；
});    
$（“#页脚”）.contents（）.filter（函数（）{
var$this=$（this）；
返回$this.children（）.length==0&&$.trim（$this.text（））.length>0；
}).wrap（“”）；
}); 
No，html不能像那样修改，这是razor分页代码和运行的javascript的结果，我能够围绕链接（a标记）使用div，但由于所选页码周围没有链接，我无法用div将其环绕，你能建议一种不同的方法吗？@yasser你正在尝试治愈症状，而不是疾病。几乎不值得投票否决，因为你的问题没有说明解决方案必须是纯CSS。没有真正简单的方法或方法技巧来做你想做的事，所以我同意whosrdaddy-改为修复呈现的代码。@Stoffe，First vote down意思是：这个答案没有用，只是因为我觉得答案没用，所以我否决了它，关于解决方案是纯CSS，请再次阅读问题，它说“CSS fix for…”希望这能回答你所有的离题疑问，伙计！@Yasser:你投了反对票，因为他说得有道理（他需要代表，让他休息一下）我试过了，jquery用这个新的span class='selectedBox'环绕着每个页面链接，我不太好，请问jquery能帮我一次吗：）
$(function() {  
 $("#footer").contents().filter(function() {

     var $this = $(this);
     return $this.children().length == 0 && $.trim($this.text()).length > 0;

 }).wrap("<span class='selectedBox' />");       
});   

function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

$(function() {  
 $("#footer a").contents().wrap("<span class='blackBox' />");
 $("#footer").find("a span").each(function(){
    var val = $.trim($(this).text());
    if (!isNumber(val))
       $(this).attr('class', 'whiteBox');      
  });    

 $("#footer").contents().filter(function() {

     var $this = $(this);
     return $this.children().length == 0 && $.trim($this.text()).length > 0;

 }).wrap("<span class='whiteBox' />");       
});