Html 为什么有些浏览器会自动；调整“大小”；页面上的文本区域？_Html_Css

Html 为什么有些浏览器会自动；调整“大小”；页面上的文本区域？

html css

Html 为什么有些浏览器会自动；调整“大小”；页面上的文本区域？,html,css,Html,Css,这是我的网站：sanyigarazs.atw.hu 在“Kapcsolat”页面上，有一个文本区域在GoogleChrome中，它会调整到合适的大小，但在某些浏览器（Edge、Mozilla）中，页面的其他元素比文本区域更宽，这很烦人这是我的标记： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Kap

这是我的网站：sanyigarazs.atw.hu

在“Kapcsolat”页面上，有一个文本区域

在GoogleChrome中，它会调整到合适的大小，但在某些浏览器（Edge、Mozilla）中，页面的其他元素比文本区域更宽，这很烦人

这是我的标记：

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>Kapcsolat</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Quicksand">
        <link rel="stylesheet" type="text/css" href="mainn.css">
    <body>
        <div class="container">
            <nav class="navbar navbar-inverse navbar-fixed-top">
                    <div class="container">
                        <div class="navbar-header">
                            <a href="index.html" class="navbar-brand">Sanyigarázs</a>
                        </div>
                        <div class="nav navbar-nav">
                            <li><a href="rolunk.html">Rólunk</a></li>
                            <li><a href="#">Kapcsolat</a></li>
                            <li><a href="weboldalrol.html">Weboldalról</a></li>
                        </div>
                        <!-- <form class="form-inline">
                            <input class="form-control mr-sm-2" type="search" placeholder="Ide írja keresését." aria-label="Keresés">
                            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Keresés</button>
                        </form> -->
                    </div>
            </nav>
            <div>
                <h3 align="center">Hívjanak telefonon: 06999999999</h3>
                <hr>
                <h5 align="center">Vagy üzenjenek e-mailen keresztül:</h5>
                <form id="uzenetes" action="emailtest.php" method="post">
                    <table border="0">
                        <tr>
                            <td align="center"><input type="text" placeholder="Az ön neve" name="username"
                            size="20" maxlength="150" width="150"/></td>
                        </tr>
                        <tr>
                            <td align="center"><input placeholder="Az ön e-mail címe" type="text" name="address"
                            size="20" maxlength="150" width="150"/></td>
                        </tr>
                        <tr>
                            <td align="center"><input type="text" placeholder="Az üzenet tárgya" name="subject"
                        size="20" maxlength="150"/></td>
                        </tr>
                        <tr>
                            <td><textarea id="message" name="message" placeholder="Ide írja üzenetét..."  size="20" maxlength="150"></textarea></td>
                        </tr>
                            <td colspan="2" align="center"><input id="button" type="submit"
                            value="Elküldés"/></td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>

    </body>
    </html>

form { 
    margin: 0 auto; 
    width:240px;
    font-size: 150%;
    }
    td {
        display: block;
        padding: 5px;
    }



    textarea {
        width: 230px;
        margin-top: 0%;
        resize: vertical;
    }
    #mobile {
        padding: 30px;
    }
    body {
    font-family: 'Quicksand', sans-serif;
    }
    .thumbnail {
    transition: all 0.2s;
    }
    .thumbnail:hover {
    transform: scale(1.1);
    }
    p {
    text-align: center;
    }
    .jumbotron {
    border: 1px solid black;
    }
    .tested {
    font-size: 140%;
    }
    .bug {
    padding: 15px;
    border-top: 1px solid black;
    }
    .navbar-inverse {
    transition: all 0.2s;
    }
    .navbar-inverse:hover {
    transform: scale(1.03);
    } 
    .weboldalroltext {
    padding-bottom: 3px;
    }
    body { 
    padding-top: 70px; 
    }
    .mainHeader {
    padding-bottom: 50px;
    }
    .navbar {
    padding-top: 5px;
    font-size: 20px;
    }
    .navbar-brand {
    font-size: 20px;
    }
    a:after {
    display: block;
    content: '';
    border-bottom: solid 3px #fff;
    transform: scaleX(0);
    transition: transform 250ms ease-in-out;
    padding: 5px 0px 0px 0px;
    }
    a:hover:after {
    transform: scaleX(1);
    }
    .helloka {
    width: 300px;
    font-size: 25px;
    }
    hr {
    height: 10px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
    }
    form {  
    padding-top: 10px;
    }
    h5 {
    font-size: 18px;
    }


卡普索拉特



希夫贾纳克电话：06999999

Vagyüzenjenek e-mailen keresztül：
表格{
保证金：0自动；
宽度：240px；
字体大小：150%；
}
运输署{
显示：块；
填充物：5px；
}
文本区{
宽度：230px；
利润率最高：0%；
调整大小：垂直；
}
#流动的{
填充：30px；
}
身体{
字体系列：“流沙”，无衬线；
}
.缩略图{
过渡：均为0.2s；
}
.缩略图：悬停{
转换：比例（1.1）；
}
p{
文本对齐：居中；
}
琼伯伦先生{
边框：1px纯黑；
}
.测试{
字体大小：140%；
}
.臭虫{
填充：15px；
边框顶部：1件纯黑；
}
.导航条反转{
过渡：均为0.2s；
}
.navbar反转：悬停{
转换：比例（1.03）；
} 
.weboldalroltext{
垫底：3件；
}
正文{
填充顶部：70px；
}
.main标题{
填充底部：50px；
}
navbar先生{
垫面：5px；
字体大小：20px；
}
.navbar品牌{
字体大小：20px；
}
a:以后{
显示：块；
内容：''；
边框底部：实心3px#fff；
变换：scaleX（0）；
转换：转换250ms缓进缓出；
填充：5px 0px 0px 0px；
}
a:悬停：之后{
变换：scaleX（1）；
}
helloka先生{
宽度：300px；
字体大小：25px；
}
人力资源{
高度：10px；
边界：0；
框阴影：插入0 12px 12px-12px rgba（0,0,0,0.5）；
}
表格{
填充顶部：10px；
}
h5{
字号：18px；
}

所以我想使textarea的大小与其他元素（230px）相等，但它只在chrome浏览器中工作

谢谢你的帮助，克里斯托夫。

每个浏览器都有自己预定义的css样式表。要使其标准化，请使用“重置css”代码段。你可以在谷歌上找到一些代码

在包含mainn.css之前，将其放入reset.css文件并链接到head部分

html，body，div，span，applet，object，iframe，
h1、h2、h3、h4、h5、h6、p、块报价、预，
a、 缩写，首字母缩写，地址，大，引用，代码，
del、dfn、em、img、ins、kbd、q、s、samp、，
小、走向、强、次、辅助、tt、var、，
b、 u，i，中心，
dl，dt，dd，ol，ul，li，
字段集、表单、标签、图例、，
表格、标题、正文、tfoot、THAD、tr、th、td、，
文章、旁白、画布、细节、嵌入、，
图，figcaption，页脚，页眉，H组，
菜单、导航、输出、ruby、节、摘要、，
时间、标记、音频、视频{
保证金：0；
填充：0；
边界：0；
字体大小：100%；
字体：继承；
垂直对齐：基线；
}
/*旧浏览器的HTML5显示角色重置*/
文章，旁白，细节，图表，
页脚、页眉、H组、菜单、导航、节{
显示：块；
}
身体{
线高：1；
}
ol，ul{
列表样式：无；
}
区块报价，q{
报价：无；
}
blockquote:before，blockquote:after，
问：之前，问：之后{
内容：''；
内容：无；
}
桌子{
边界塌陷：塌陷；
边界间距：0；
}

首先，编辑HTML代码

删除HTML中

textarea

元素的

size

属性和

input

元素的

width

属性，因为它们无效。对于

输入

s，您不需要使用

size=20

，因为这是默认值

然后，按如下方式更改CSS：

input[type="text"],
textarea {
  width: 230px /* or you can use 100% */
  /* P.S. The resize option is not supported by Edge */
}

form{
保证金：0自动；
宽度：240px；
字体大小：150%；
}
运输署{
显示：块；
填充物：5px；
}
输入[type=“text”]，
文本区{
宽度：230像素
}
文本区{
利润率最高：0%；
调整大小：垂直；
}
#流动的{
填充：30px；
}
身体{
字体系列：“流沙”，无衬线；
}
.缩略图{
过渡：均为0.2s；
}
.缩略图：悬停{
转换：比例（1.1）；
}
p{
文本对齐：居中；
}
琼伯伦先生{
边框：1px纯黑；
}
.测试{
字体大小：140%；
}
.臭虫{
填充：15px；
边框顶部：1件纯黑；
}
.导航条反转{
过渡：均为0.2s；
}
.navbar反转：悬停{
转换：比例（1.03）；
} 
.weboldalroltext{
垫底：3件；
}
正文{
填充顶部：70px；
}
.main标题{
填充底部：50px；
}
navbar先生{
垫面：5px；
字体大小：20px；
}
.navbar品牌{
字体大小：20px；
}
a:以后{
显示：块；
内容：''；
边框底部：实心3px#fff；
变换：scaleX（0）；
转换：转换250ms缓进缓出；
填充：5px 0px 0px 0px；
}
a:悬停：之后{
变换：scaleX（1）；
}
helloka先生{
宽度：300px；
字体大小：25px；
}
人力资源{
高度：10px；
边界：0；
框阴影：插入0 12px 12px-12px rgba（0,0,0,0.5）；
}
表格{
填充顶部：10px；
}
h5{
字号：18px；
}


卡普索拉特