为什么表单输入被省略号替换?

时间:2014-06-02 14:06:31

标签: html css

网格(表格)上的输入仅在我点击它们时显示,否则它们将被3个点替换。这只发生在FF和IE中,而不是Chrome中。

以下是一些截图:

table grid with ellipses replacing inputs

只要点击输入,它就会恢复。

table grid with input showing after being clicked on

以下是Chrome中的样式表:

element.style {
   padding-left: 0px;
   padding-right: 0px;
   white-space: inherit;
}
input[type=text] {
   height: 42px;
   padding: 0 6px 0 10px;
   font-size: 14px;
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
   border-radius: 0;
   border-top-color: none;
}
input[type=text] {
   margin-bottom: 0;
   border: 1px solid #c2c2c2;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
   border-radius: 0;
}
input[type=text] {
   background-color: #fff;
   border: 1px solid #ccc;
   -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
   -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
   box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
   -webkit-transition: border linear .2s,box-shadow linear .2s;
   -moz-transition: border linear .2s,box-shadow linear .2s;
   -o-transition: border linear .2s,box-shadow linear .2s;
   transition: border linear .2s,box-shadow linear .2s;
}
input[type=text] {
   display: inline-block;
   height: 20px;
   padding: 4px 6px;
   margin-bottom: 10px;
   font-size: 12px;
   line-height: 20px;
   color: #555;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   vertical-align: middle;
}
input[type=search] {
   -webkit-box-sizing: content-box;
   -moz-box-sizing: content-box;
   box-sizing: content-box;
   -webkit-appearance: textfield;
 }
 .input-xlarge {
    width: 270px;
 }
 .input-xlarge {
    width: 270px;
  }
  .k-widget, .k-widget * {
     -moz-background-clip: border-box;
     -webkit-background-clip: border-box;
     background-clip: border-box;
  }
 .k-animation-container, .k-widget, .k-widget *, .k-animation-container *, .k-widget 
 :before, .k-animation-container :after, .k-block .k-header, .k-list-container {
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
 }
 input {
    width: 210px;
 }
 label, input, button, select, textarea {
     font-size: 14px;
     font-weight: 400;
     line-height: 20px;
 }
 input, textarea, .uneditable-input {
    margin-left: 0;
 }
 input, textarea, .uneditable-input {
    width: 206px;
 }
 input, button, select, textarea {
     font-family: "Open Sans",Arial,sans-serif;
 }
 label, input, button, select, textarea {
     font-size: 12px;
     font-weight: 400;
     line-height: 20px;
 }
 button, input {
     line-height: normal;
 }
 button, input, select, textarea {
    margin: 0;
    font-size: 100%;
    vertical-align: middle;
 }
 user agent stylesheetinput[type="search"] {
    padding: 1px;
 }
 user agent stylesheetinput[type="search"] {
    -webkit-appearance: searchfield;
    box-sizing: border-box;
 }
 user agent stylesheetinput, input[type="password"], input[type="search"] {
    -webkit-appearance: textfield;
    padding: 1px;
    background-color: white;
    border: 2px inset;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    -webkit-rtl-ordering: logical;
    -webkit-user-select: text;
    cursor: auto;
}
user agent stylesheetinput, input[type="password"], input[type="search"] {
   -webkit-appearance: textfield;
   padding: 1px;
   background-color: white;
   border: 2px inset;
   border-image-source: initial;
   border-image-slice: initial;
   border-image-width: initial;
   border-image-outset: initial;
   border-image-repeat: initial;
   -webkit-rtl-ordering: logical;
   -webkit-user-select: text;
   cursor: auto;
}
user agent stylesheetinput, textarea, keygen, select, button {
   margin: 0em;
   font: -webkit-small-control;
   color: initial;
   letter-spacing: normal;
   word-spacing: normal;
   text-transform: none;
   text-indent: 0px;
   text-shadow: none;
   display: inline-block;
   text-align: start;
}
user agent stylesheetinput, textarea, keygen, select, button, meter, progress {
   -webkit-writing-mode: horizontal-tb;
}
Pseudo ::before element
.k-animation-container, .k-widget, .k-widget *, .k-animation-container *, .k-widget    
:before, .k-animation-container :after, .k-block .k-header, .k-list-container {
   -moz-box-sizing: content-box;
   -webkit-box-sizing: content-box;
   box-sizing: content-box;
}
Inherited from td#aria_active_cell.sg-grid-filter-cell
.k-grid td {
   border-style: solid;
   border-width: 0 0 0 1px;
   padding: .4em .6em;
   overflow: hidden;
   line-height: 1.6em;
   vertical-align: middle;
   text-overflow: ellipsis;
}
.sg-grid-filter-cell {
   background-color: #c2c2c2;
   white-space: nowrap;
   vertical-align: top!important;
}
Inherited from table
.k-grid table {
   width: 100%;
   margin: 0;
   border-collapse: separate;
   border-spacing: 0;
   empty-cells: show;
   border-width: 0;
   outline: 0;
}
table {
   max-width: 100%;
   background-color: transparent;
   border-collapse: collapse;
   border-spacing: 0;
}
user agent stylesheettable {
   display: table;
   border-collapse: separate;
   border-spacing: 2px;
   border-color: gray;
}
Inherited from div.k-grid-header-wrap
.k-grid-header-wrap, .k-grid-footer-wrap {
   position: relative;
   width: 100%;
   overflow: hidden;
   border-style: solid;
   border-width: 0 1px 0 0;
   zoom: 1;
}
Inherited from div.k-grid-header
div.k-grid-header, div.k-grid-footer {
   padding-right: 17px;
   border-bottom-style: solid;
   border-bottom-width: 1px;
   zoom: 1;
}
Inherited from div.k-grid.k-widget
.sg-grid, .k-grid {
   border: 0;
   font-size: 12px;
   font-weight: 400;
   line-height: 20px;
   color: #262626;
   overflow-y: auto;
}
.k-block, .k-widget, .k-popup, .k-content, .k-dropdown .k-input {
   color: #787878;
}
.k-grid, .k-listview {
   position: relative;
   zoom: 1;
}
.k-block, .k-widget {
line-height: normal;
   outline: 0;
}
Inherited from div.sg-grid.ng-scope.ng-isolate-scope
.sg-grid, .k-grid {
   border: 0;
   font-size: 12px;
   font-weight: 400;
   line-height: 20px;
   color: #262626;
   overflow-y: auto;
}

1 个答案:

答案 0 :(得分:0)

@ j08691指出的解决方案是样式表中的这个类:

Inherited from td#aria_active_cell.sg-grid-filter-cell .k-grid td { 
   border-style: solid; 
   border-width: 0 0 0 1px; 
   padding: .4em .6em; 
   overflow: hidden; 
   line-height: 1.6em; 
   vertical-align: middle; 
   text-overflow: ellipsis; // THIS WAS CAUSING THE ELLIPSIS!
}