边界框不显示文本,填充框不正确显示
Border-box not displaying text, padding-box not displaying correctly
我目前有一个问题,我的网站和聊天服务,我们正在努力实现。我已经将问题缩小到与border-box属性相关的CSS问题。
这个问题也只存在于Internet Explorer 11。该框在Mozilla、Chrome甚至更早版本的IE中都能正常显示。一旦用户点击网站左侧的"需要帮助,实时聊天"按钮,他们就无法看到他们的输入文本。我知道正在输入数据并且可以工作,但是由于某种原因,字段没有显示用户键入的内容。我认为这是一个大小问题,在IE 11中显示没有CSS的页面被证明是正确的,我可以看到框中的条目,但是一旦CSS启用,它再次从字段中消失。我尝试了很多编辑来让它工作,但没有成功,但最终还是切换到填充框,只是想看看它是否有效。这似乎在两个浏览器中都有效,但在IE 11中,文本拥抱底部边框,看起来很糟糕。
是否有一种方法,我可以要么修复边界框,让文本显示在正确的区域,或者有一种方法,我可以浮动文本向上,而使用填充框,使它看起来更好?
下面是启用聊天代码的页面:https://www.sundancevacations.com/company/privacy-statement/
这是我目前正在使用的代码。
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {
display: block;
}
audio,canvas,video {
display: inline-block;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden],template {
display: none;
}
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
a {
background: transparent;
}
a:focus {
outline: thin dotted;
}
a:active,a:hover {
outline: 0;
}
h1 {
font-size: 2em;
margin: .67em 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,strong {
font-weight: 700;
}
dfn {
font-style: italic;
}
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
mark {
background: #ff0;
color: #000;
}
code,kbd,pre,samp {
font-family: monospace,serif;
font-size: 1em;
}
pre {
white-space: pre-wrap;
}
q {
quotes: "'201C" "'201D" "'2018" "'2019";
}
small {
font-size: 80%;
}
sub,sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -.5em;
}
sub {
bottom: -.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 0;
}
fieldset {
border: 1px solid silver;
margin: 0 2px;
padding: .35em .625em .75em;
}
legend {
border: 0;
padding: 0;
}
button,input,select,textarea {
font-family: inherit;
font-size: 100%;
margin: 0;
}
button,input {
line-height: normal;
}
button,select {
text-transform: none;
}
button,html input[type=button],input[type=reset],input[type=submit] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],html input[disabled] {
cursor: default;
}
input[type=checkbox],input[type=radio] {
box-sizing: border-box;
padding: 10px;
width: 1%;
}
input[type=search] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
button::-moz-focus-inner,input::-moz-focus-inner {
border: 0;
padding: 0;
}
textarea {
overflow: auto;
vertical-align: top;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
目前我的盒子大小是这样的:
*,input[type="search"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: padding-box;
}
任何帮助都将非常感激。
所以我能够找出这里的问题。
结果是border-box设置被隐藏在CSS的另一部分中的条目覆盖了。它在所有内容周围添加了10px的填充,这导致文本显示在该区域之外,从而产生没有输入任何内容的错觉。
我把它减小到5px,边框设置现在可以正常工作了。第二个CSS文件(保存在一个单独的地方)让我陷入了困境。填充被标记为一个重要的标记,导致它覆盖聊天框的设置。
谢谢大家的帮助!
将此添加到样式表的顶部:
html,
body {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
删除:
*, input[type="search"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: padding-box; }
如果你在其他地方有更多的box-sizing
规则,确保你知道你在做什么。我建议,如果有任何是模板的一部分,你不要碰。您应该删除自己添加的任何额外的box-sizing
属性。
html,
body {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background: black;
}
<input name="email" id="email" style='background: #fff url("https://storage.googleapis.com/code.snapengage.com/wbg/blank.gif"); list-style: none; margin: 0px; padding: 0px; border: currentColor; border-image: none; left: 35px; top: 85px; width: 310px; height: 20px; text-align: left; color: black; line-height: normal; text-indent: 0px; clear: none; font-family: "lucida grande","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 13px; font-style: normal; font-weight: normal; float: none; display: block; position: absolute; z-index: 2; min-height: 20px; max-height: 20px; min-width: 310px; max-width: 310px; text-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none;'
type="text" size="10" value="">
- 带有填充属性的SVG矩形显示在包含元素的上方插入框阴影
- 如何隐藏和显示通过窗体填充的表
- 使用 JavaScript 在弹出窗口中填充显示标记
- 谷歌地图API没有;t显示地图,如果中心由javascript函数填充
- 如何在从代码后面显示之前,在弹出窗口中选择预先填充的下拉列表选项
- 如何动态设置填充并在不刷新的情况下显示它
- 一次高亮显示一个城市,并在悬停其他城市时删除颜色填充
- Jquery Chosen插件-通过Ajax动态填充列表时显示加载图标
- 如何用图形填充流星集合并单独显示它们
- AngularJs 不显示从控制器填充的列表
- 动态填充表时突出显示和排序问题
- 使用 For 循环使隐藏的表行在填充时显示
- JavaScript 在输入填充时显示隐藏元素
- React - 如何填充和显示模态,然后在提交时发送 AJAX 请求
- 我正在尝试并排显示 2 个进度条,但其中一个正在填充,另一个甚至不是代码在不同的 js 函数中
- JQuery:选择已填充,但显示的文本是旧的
- 通过 AJAX Get 填充显示迭代表
- 如何根据 JSON 对象的属性动态填充 Angular JS 中的显示对象
- 当第二个输入框填充第一个框中的数据时显示警报
- 使绑定元素在初始页面加载后填充时显示