gpt4 book ai didi

html - 在所有浏览器中一致地显示文本区域大小

转载 作者:可可西里 更新时间:2023-11-01 13:12:47 26 4
gpt4 key购买 nike

我在 IE 中遇到以下代码的小问题。

该设计在 Chrome 和 Firefox 中是完美的,但 IE 呈现的 textarea 尺寸非常小。我想要它在 Firefox 或 Chrome 中的样子。

它可能是
的副本 Consistently sizing a <textarea> under IE, FF, Safari/Chrome
或者
Firefox / IE textarea sizing quirk - workarounds?
但没有提到适当的解决方案。所以我开始了这个。

我确信 jQuery 可以解决这个问题,但我的页面中只需要 CSS,是否有合适的 CSS 解决方案??

我无法登录 jsFiddle,所以,没有 jsFiddle 的家伙.. :(

<!DOCROOT html>

<html>

<head>

<meta charset="utf-8" />

<title>Code Compressor</title>

<link href="styles.css" rel="stylesheet" type="text/css" />

<style type="text/css">

.container {
width: 100%;
overflow: hidden;
}

.column {
width: 48%;
margin: 1%;
float: left;
}

textarea {
min-width: 100%;
max-width: 100%;

min-height: 80%;
max-height: 80%;

overflow: auto;
}

.center {
clear: both;
text-align: center;
}

</style>

</head>


<body>

<div class="container">

<div class="column">
<div>Input Source:</div>
<textarea id="sourceCode" name="sourceCode" ></textarea>
</div>

<div class="column">
<div>Compressed Output:</div>
<textarea id="outputCode" name="outputCode" ></textarea>
</div>

<div class="center">
<input type="button" id="compressButton" name="compressButton"
value="Compress" onClick="compress" />
</div>

</div>

</body>

</html>

最佳答案

如果高度不符合预期,请尝试为 .column 设置高度。您的 textarea 位于一列内,其高度是他父亲的百分比,但是,您父亲有多高?

已更新

您告诉过如果您为 textarea 设置高度,.center 层会被列重叠,对吗?然后我们必须设置相对于彼此的列,我们必须向 HTML 解释我们的 .center 应该在我们的列之后。为此,请遵循以下代码:

.column {
width: 48%;
height: 500px; /* for example */
position: relative; /* add this to trasnform your columns
relative to each other */
margin: 1%;
float: left;
}

textarea {
min-width: 100%;
max-width: 100%;

width: 90%;
height: 90%;

min-height: 80%;
max-height: 80%;

overflow: auto;
}

.center {
width: 100%; /* to specify that your "center" must
to occupy 100% of the width on the screen. */
position: relative; /* to transform the position to relative */
float: left; /* to accompany the columns' floating */
clear: both;
text-align: center;
}

百分比理解

只是为了让事情看起来更好:要使用百分比,我们需要一个初始点。这意味着如果某物的高度是其他物的 80%,我们需要知道其他物的高度。

换句话说,要.something有80%的高度,我们需要知道他父亲的高度,如果他父亲有90%的高度,他父亲的父亲必须有指定的高度。在某些时候,我们需要一个定义的高度。

JavaScript 替代品

正如我所说,我在百分比测量方面工作太多,但没有成功找到纯 CSS 2.1 的解决方案。于是,我用 JavaScript + jQuery 创建了这个迷你插件。没有变通办法:

function calculateResponsiveHeight(couple) {
for (var value in couple) {
$(value)
.css("height",
$(couple[value].wrapper).height() -
couple[value].spacing + "px");
}
}

用法:

calculateResponsiveHeight({
".content": {
spacing: 135, // how much you want to spacing your layer?
wrapper: window // who is the reference point?
}
});

关于html - 在所有浏览器中一致地显示文本区域大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17448162/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com