为什么边界消失在IE 9中边界消失:崩溃?

时间:2013-02-19 06:24:23

标签: css internet-explorer border

我有一个网页,我试图在所有浏览器中获得正确的边框。 见http://dl.dropbox.com/u/17256431/SpreadsheetConverter/border-3/border-3.htm

网页上有 html 5 doctype ,表格采用 border-collapse:collapse 设置样式。 所需的结果如Chrome中所示。请参阅enter image description here

但是,在IE 9中,不会渲染边框。见enter image description here 内容'j'的单元格已定义顶部边框= 2px。

如果我在Quirks模式下在IE 9中查看,结果与Chrome中的结果相同。为什么使用边框折叠:将边框2px和0px合并为0px?

由于我的应用程序限制,我需要使用html 5 doctype和border-collapse:collapse。

这里有什么东西我不见了吗?任何想法?

提前致谢!

1 个答案:

答案 0 :(得分:0)

好吧,

  1. 对于var myWindow = myWindow || {}; myWindow.Resize = function () { //$(".container-box").height($("#contentRow").height() - 15); setHeight("container-box", $("#contentRow").height() - 15); }; window.onload = function () { myWindow.Resize(); //$("#container-root").show(); showStuff("container-root"); $(window).resize(myWindow.Resize()); } function showStuff(id) { document.getElementById(id).style.display = 'block'; } function setHeight(className, size) { document.getElementsByClassName(className).height = size; } 内的CSS,请添加*.ee121
  2. {position: absolute; margin-top: -2px; width: 189px;}内添加*.ee126
  3. {position: absolute; width: 186px;}
    /* begin: toolbar styles */
    
    .toolbar {
      margin-top: 5px;
      background-color: #f1f1f1;
      z-index: -1;
      border-top: solid 4px #ff9c08;
      border-bottom: solid 2px #D9d8CE;
      display: inline-block;
      height: 54px;
      width: 100%;
    }
    .toolbar-upper {
      margin-top: 5px;
      background-color: #f1f1f1;
      z-index: -1;
      border-bottom: solid 4px #ff9c08;
      border-top: solid 2px #D9d8CE;
      display: inline-block;
      height: 54px;
      width: 100%;
    }
    .toolbar .tlb-btn {
      text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
      cursor: pointer;
      text-align: center;
    }
    .toolbar .tlb-elm {
      height: 22px;
    }
    .toolbar-upper .tlb-elm {
      height: 22px;
    }
    .toolpanel {
      float: left;
      margin: 16px 0 0 16px;
    }
    .toolbarGreenbtn {
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79c979), color-stop(1, #009900));
      background: -moz-linear-gradient(center top, #79c979 5%, #009900 100%);
      background-color: #009900;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      border-radius: 4px;
      border: 1px solid #009900;
      display: inline-block;
      color: #ffffff;
      font-family: arial;
      font-size: .8em;
      font-weight: bold;
      padding: 0 14px;
      text-decoration: none;
      margin: 0;
      height: 100%;
    }
    .toolbarBluebtn {
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #1e62d0));
      background: -moz-linear-gradient(center top, #3d94f6 5%, #1e62d0 100%);
      background-color: #1e62d0;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      border-radius: 4px;
      border: 1px solid #075bd1;
      display: inline-block;
      color: #ffffff;
      font-family: arial;
      font-size: .8em;
      font-weight: bold;
      padding: 0 14px;
      text-decoration: none;
      margin: 0;
      height: 100%;
    }
    /* begin: toolbar hyperlink */
    
    .tlb-nav-link {
      display: table;
      height: 54px;
      float: left;
      margin-left: 16px;
    }
    .tlb-nav-link div {
      display: table-cell;
      vertical-align: middle;
      padding-right: 10px;
    }
    .tlb-nav-link a {
      display: block;
      font-size: 12px;
      color: #2271E7;
      text-decoration: none;
    }
    .tlb-nav-link a:hover {
      color: #F16A22;
    }
    .tlb-nav-button {
      float: left;
      margin-top: 16px;
      margin-left: 10px;
    }
    .tlb-nav-button div {
      vertical-align: middle;
      padding-right: 10px;
    }
    .tlb-nav-button a {
      background-color: #94A1C1;
      -webkit-border-radius: 4px;
      -moz-border-radius: 3px;
      border-radius: 4px;
      padding: 3px 14px;
      display: inline-block;
      font-size: .8em;
      color: white;
      height: 100%;
      font-family: arial;
      margin-left: 5px;
      text-decoration: none;
    }
    .tlb-nav-button a:hover {
      background-color: #697cac;
      text-decoration: underline;
    }
    /* end: toolbar hyperlink */
    
    .ui-widget-content {
      border: 1px solid #A0A0A0;
      background: #FFFFFF !important;
    }
    /* Styles needed by SpreadsheetConverter */
    
    *.ee100 {
      color: black;
      font-family: Calibri, sans-serif;
      font-size: 11.00pt;
      font-style: normal;
      font-weight: 400;
      padding-left: 1px;
      padding-right: 1px;
      padding-top: 1px;
      text-align: left;
      vertical-align: bottom
    }
    *.ee103 {
      border-bottom: 0.75pt solid windowtext;
      color: black;
      font-family: Calibri, sans-serif;
      font-size: 11.00pt;
      font-style: normal;
      font-weight: 400;
      padding-left: 1px;
      padding-right: 1px;
      padding-top: 1px;
      text-align: left;
      vertical-align: bottom
    }
    *.ee107 {
      border: 0.75pt solid windowtext;
      color: black;
      font-family: Calibri, sans-serif;
      font-size: 11.00pt;
      font-style: normal;
      font-weight: 400;
      padding-left: 1px;
      padding-right: 1px;
      padding-top: 1px;
      text-align: left;
      vertical-align: bottom
    }
    *.ee108 {
      border-left: 0.75pt solid windowtext;
      border-top: 0.75pt solid windowtext;
      color: black;
      font-family: Calibri, sans-serif;
      font-size: 11.00pt;
      font-style: normal;
      font-weight: 400;
      padding-left: 1px;
      padding-right: 1px;
      padding-top: 1px;
      text-align: right;
      vertical-align: bottom
    }
    *.ee111 {
      border-top: 0.75pt solid windowtext;
      color: black;
      font-family: Calibri, sans-serif;
      font-size: 11.00pt;
      font-style: normal;
      font-weight: 400;
      padding-left: 1px;
      padding-right: 1px;
      padding-top: 1px;
      text-align: right;
      vertical-align: bottom
    }
    *.ee112 {
      border-left: 1.50pt solid windowtext;
      border-top: 1.50pt solid windowtext;
      color: black;
      font-family: Calibri, sans-serif;
      font-size: 11.00pt;
      font-style: normal;
      font-weight: 400;
      padding-left: 1px;
      padding-right: 1px;
      padding-top: 1px;
      text-align: right;
      vertical-align: bottom
    }
    *.ee113 {
      border-right: 1.50pt solid windowtext;
      border-top: 1.50pt solid windowtext;
      color: black;
      font-family: Calibri, sans-serif;
      font-size: 11.00pt;
      font-style: normal;
      font-weight: 400;
      padding-left: 1px;
      padding-right: 1px;
      padding-top: 1px;
      text-align: right;
      vertical-align: bottom
    }
    *.ee114 {
      border-bottom: 0.75pt solid windowtext;
      border-left: 0.75pt solid windowtext;
      color: black;
      font-family: Calibri, sans-serif;
      font-size: 11.00pt;
      font-style: normal;
      font-weight: 400;
      padding-left: 1px;
      padding-right: 1px;
      padding-top: 1px;
      text-align: right;
      vertical-align: bottom
    }
    *.ee115 {
      border-bottom: 0.75pt solid windowtext;
      color: black;
      font-family: Calibri, sans-serif;
      font-size: 11.00pt;
      font-style: normal;
      font-weight: 400;
      padding-left: 1px;
      padding-right: 1px;
      padding-top: 1px;
      text-align: right;
      vertical-align: bottom
    }
    *.ee116 {
      border-bottom: 1.50pt solid windowtext;
      border-left: 1.50pt solid windowtext;
      color: black;
      font-family: Calibri, sans-serif;
      font-size: 11.00pt;
      font-style: normal;
      font-weight: 400;
      padding-left: 1px;
      padding-right: 1px;
      padding-top: 1px;
      text-align: right;
      vertical-align: bottom
    }
    *.ee117 {
      border-bottom: 1.50pt solid windowtext;
      border-right: 1.50pt solid windowtext;
      color: black;
      font-family: Calibri, sans-serif;
      font-size: 11.00pt;
      font-style: normal;
      font-weight: 400;
      padding-left: 1px;
      padding-right: 1px;
      padding-top: 1px;
      text-align: right;
      vertical-align: bottom
    }
    *.ee118 {
      border-bottom: 1.50pt solid windowtext;
      color: black;
      font-family: Calibri, sans-serif;
      font-size: 11.00pt;
      font-style: normal;
      font-weight: 400;
      padding-left: 1px;
      padding-right: 1px;
      padding-top: 1px;
      text-align: left;
      vertical-align: bottom
    }
    *.ee119 {
      border-left: 1.50pt solid windowtext;
      border-top: 1.50pt solid windowtext;
      color: black;
      font-family: Calibri, sans-serif;
      font-size: 11.00pt;
      font-style: normal;
      font-weight: 400;
      padding-left: 1px;
      padding-right: 1px;
      padding-top: 1px;
      text-align: left;
      vertical-align: bottom
    }
    *.ee120 {
      border-right: 1.50pt solid windowtext;
      border-top: 1.50pt solid windowtext;
      color: black;
      font-family: Calibri, sans-serif;
      font-size: 11.00pt;
      font-style: normal;
      font-weight: 400;
      padding-left: 1px;
      padding-right: 1px;
      padding-top: 1px;
      text-align: left;
      vertical-align: bottom
    }
    *.ee121 {
      border-bottom: 1.50pt solid windowtext;
      border-top: 1.50pt solid windowtext;
      color: black;
      font-family: Calibri, sans-serif;
      font-size: 11.00pt;
      font-style: normal;
      font-weight: 400;
      padding-left: 1px;
      padding-right: 1px;
      padding-top: 1px;
      text-align: center;
      vertical-align: bottom;
      position: absolute;
      margin-top: -2px;
      width: 189px;
    }
    *.ee124 {
      border-bottom: 1.50pt solid windowtext;
      border-left: 1.50pt solid windowtext;
      color: black;
      font-family: Calibri, sans-serif;
      font-size: 11.00pt;
      font-style: normal;
      font-weight: 400;
      padding-left: 1px;
      padding-right: 1px;
      padding-top: 1px;
      text-align: left;
      vertical-align: bottom
    }
    *.ee125 {
      border-bottom: 1.50pt solid windowtext;
      border-right: 1.50pt solid windowtext;
      color: black;
      font-family: Calibri, sans-serif;
      font-size: 11.00pt;
      font-style: normal;
      font-weight: 400;
      padding-left: 1px;
      padding-right: 1px;
      padding-top: 1px;
      text-align: left;
      vertical-align: bottom
    }
    *.ee126 {
      border-bottom: 1.50pt solid windowtext;
      border-left: 1.50pt solid windowtext;
      border-right: 1.50pt solid black;
      border-top: 1.50pt solid windowtext;
      color: black;
      font-family: Calibri, sans-serif;
      font-size: 11.00pt;
      font-style: normal;
      font-weight: 400;
      padding-left: 1px;
      padding-right: 1px;
      padding-top: 1px;
      text-align: center;
      vertical-align: bottom;
      position: absolute;
      width: 186px;
    }
    textarea {
      overflow: auto;
    }

    这就是全部,它应该对你有用,如果你有任何问题,请告诉我。