【问题标题】:Textarea does not fill table cell in all major browsersTextarea 不会在所有主流浏览器中填充表格单元格
【发布时间】:2012-12-10 03:38:41
【问题描述】:

这很奇怪,但我有一个 jsFiddle,当用户单击“添加问题”按钮以附加表格行时,在附加行的“问题”列下,文本区域的高度和宽度在此表格单元格可以填充表格单元格。

http://jsfiddle.net/LKB9e/12/

但问题是我的应用程序中有完全相同的代码,但在我的应用程序中,textarea 没有填充 IE、Firefox 和 Opera 的表格单元格,但它在 safari 和 Chrome 中运行良好。

为什么它不能在其他浏览器中运行?如何在这些浏览器中运行?

应用

下面是编译textarea的主要css:

.question { 
    min-width:14%;
    max-width:14%;
    border:1px black solid;
    border-collapse:collapse;
      line-height: 0;
}

.question textarea {

        min-width:auto;
        max-width:auto;
        resize:none;
        height:100%;
        font-size:100%;
          display: block; 

    }

其他浏览器的哪些小问题可能导致此问题?

【问题讨论】:

  • 只需使用扩展名 -ms- 用于 IE n -o- 用于歌剧和 -moz- 用于 mozila .. 它可能会有所帮助
  • @user1830984 请看我的回答并告诉我。

标签: html css


【解决方案1】:

查看更新的小提琴演示:http://jsfiddle.net/LKB9e/23/embedded/result/

它适用于所有浏览器。

HTML:

<div id="details">
    <table id="qandatbl" align="center" cellpadding="0" cellspacing="0" border="0" width="100%">
      <thead>
        <tr>
          <th width="9%" class="qid">Question No</th>
          <th width="29%" class="question">Question</th>
          <th width="62%" class="optandans">Option and Answer</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>

CSS:

#qandatbl{
    border:1px black solid;
    border-collapse:collapse;
    table-layout:fixed;
}

.question {
    /*min-width:14%;
    max-width:14%;*/
    max-width:0.1%;
    border:1px black solid;
    border-collapse:collapse;
      line-height: 0;
}

Jquery:

function insertQuestion(form) {
........
........
 // your entire function's code here
........

    setWidth(); calling this function will adjust the width and height of the text area accordin to its parent td.
}
function setWidth() {
    var questionCellWidth = $("#qandatbl tbody .question").width();
    var questionCellHeight = $("#qandatbl tbody .question").height();
    $(".textAreaQuestion").css({
        "width": (questionCellWidth - 6) + "px",
        "height": (questionCellHeight) + "px"
    });
}

其余的取决于你如何在应用程序中使外观感觉我刚刚解决了文本区域的整个宽度和高度问题。

【讨论】:

  • 哈哈谢谢你。看到你的评论后你让我很高兴,因为这个问题花了我 30 分钟来解决这个问题。 M 很高兴能帮助你。
猜你喜欢
  • 2011-05-07
  • 2016-04-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-10-03
  • 2010-12-17
  • 1970-01-01
相关资源
最近更新 更多