- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我只是在创建一些基本的 HTML/CSS。我正在创建覆盖文本、按钮和带有阴影背景的文本。但是,阴影框中的文本应该在触及宽度时换行,但在 Chrome 中却没有。不过它在 IE 和 FF 中有效。
JSFiddle:http://jsfiddle.net/QN6NS/1/
HTML:
<div class="bkgrndImgExecClub">
<div class="frameContent backgroundBox basic">
<p>Passar pelo aeroporto com rapidez utilizando o aplicativo da Bwefwef wefwef</p>
</div>
<p class="creditText">Foto por michael Chudakov Club member desde 2003</p>
<input type="submit" value="O significado de pertencer" name="callToAction" class="button primary">
</div>
CSS:
body {
font-family: Arial, Verdana, sans-serif;
}
.frameContent {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
left: 30px;
top: 50px;
word-wrap: break-word;
position: absolute;
width: 250px;
padding-left: 12px;
transition: background 0.15s ease-in-out 0s;
}
.bkgrndImgExecClub {
background-image: url(TIM_BANNERS_BLUE_LATAM_PT_TEST-IMAGE_1.jpg);
background-repeat: no-repeat;
height: 180px;
width: 760px;
position: relative;
}
.frameContent p {
color: #FFFFFF;
text-decoration: none;
text-shadow: 1px 1px 2px #000000;
font-weight: bold;
}
.creditText {
right: 20px;
top: 10px;
word-wrap: break-word; /*This doesn't seem to work in Chrome*/
position: absolute;
width: 200px;
text-align: right;
font-size: 8px;
font-size: 0.80em;
font-weight: bold;
}
.button.primary {
background: #ce210f;
background: -moz-linear-gradient(top, #ff3e3e 0%, #ce210f 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3e3e), color-stop(100%,#ce210f));
background: -webkit-linear-gradient(top, #ff3e3e 0%,#ce210f 100%);
background: -o-linear-gradient(top, #ff3e3e 0%,#ce210f 100%);
background: -ms-linear-gradient(top, #ff3e3e 0%,#ce210f 100%);
background: linear-gradient(top, #ff3e3e 0%,#ce210f 100%);
color: #fff;
font-weight: bold;
}
.button {
border: 1px solid #AE1000;
border-radius: 3px 3px 3px 3px;
position:absolute;
right: 15px;
bottom: 20px;
padding: 5px;
font-size: 7.5px;
font-size: 0.75rem;
line-height: 12px;
line-height: 1.2rem;
}
最佳答案
我假设您在查看 Chrome 中的示例时谈论的是单词“da”,它触及框的右边缘。
如何将 box-sizing: border-box;
添加到 .frameContent
类? box-sizing
属性将确保框不会因为左侧填充而“增长”。当我将此属性添加到 JSFiddle 时,它在 Chrome 和 Firefox 中看起来都一样。
我还建议可能对框的所有边(或至少右侧)使用填充,而不仅仅是左侧,无论框内的文本如何,它看起来都一致。
更多关于 box-sizing
的信息:http://css-tricks.com/box-sizing/
关于html - 为什么这个词在 Chrome 中不换行,而在 Firefox 中却换行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19377264/
我有以下案例要解决。 在短语中突出显示关键字的 Javascript 方法。 vm.highlightKeywords = (phrase, keywords) => { keywords =
我要匹配文本中的所有美元符号单词。例如,"Hello $VARONE this is $VARTWO"可以匹配$VARONE和$VARTWO。 正则表达式应该是/\$(\w+)/g,但是当我在Dart
在 redux 中,对于将状态作为参数、更改状态并返回新状态的特定操作,您会在 switch 语句中调用什么函数? function reducer(state = DEFAULT_STATE, ac
在 MySQL 5.1 中,我将一个字段命名为“Starting”。但是,每次我使用 SQL 查询时,它都会说无效的 SQL 语法。经过一些谷歌搜索,我发现 STARTING 是一个保留的 SQL 词
我必须使用函数 isIn(secretWord,lettersGuessed) 从列表中找到密码。在下面发布我的代码。 def isWordGuessed(secretWord, lettersGue
一段时间以来,我一直无法找到两个字符串中最长的常用词。首先我想到了用“isspace”函数来做这件事,但不知道如何找到一个常用词。然后我想到了“strcmp”,但到目前为止我只能比较两个字符串。我在想
我目前正在尝试制作一种“单词混合器”:对于两个给定的单词和指定的所需长度,程序应返回这两个单词的“混合”。然而,它可以是任何类型的混合:它可以是第一个单词的前半部分与第二个单词的后半部分相结合,它可以
如果 After 之后(逗号之前)没有 -ing 词,我想匹配它。所以 After 和逗号之间不应该有 -ing 词。 所需的匹配项(粗体): After sitting down, he began
我一直在试验 Stanford NLP 工具包及其词形还原功能。我很惊讶它如何使一些词词形还原。例如: depressing -> depressing depressed -> depressed
js 并尝试根据 [这里] 中的示例代码来做词云:https://github.com/jasondavies/d3-cloud .我想做的是单词的字体大小是基于数组中单词的频率。例如我有 [a,a,
我正在处理一个文本分类问题(在法语语料库上),并且正在试验不同的词嵌入。我对 ConceptNet 提供的内容非常感兴趣,所以我决定试一试。 我无法为我的特定任务找到专门的教程,所以我听取了他们的建议
当我在文本中搜索时,我输入 C-s,然后输入单词,然后一次又一次地输入 C-s,光标前进到找到的单词的下一个位置。问题是,一旦我转到下一个单词,我无法在按钮处编辑迷你缓冲区中的搜索单词,如果我按 Ba
我正在尝试按照以下结构运行这个 maven Hello Word: ├── pom.xml └── src └── Main.java 使用pom.xml设置: 4.0.0
所以,从我可以开始的.. 我正在使用 OCR。该脚本非常适合我的需要。它检测单词的准确性对我来说还可以。 这是结果:附加图像 100% 准确。 from PIL import Image import
Closed. This question does not meet Stack Overflow guidelines。它当前不接受答案。 想要改善这个问题吗?更新问题,以便将其作为on-topi
这是细节,但我想知道为什么会这样。 示例代码: Class klasa = Enum.class; for(Type t : klasa.getGenericInterfaces()) Syst
我在用: var header = ""+ "Export HTML to Word Document with JavaScript"; var footer = ""; /
我有一个程序可以像这样将数据打印到控制台(以空格分隔): variable1 value1 variable2 value2 variable3 value3 varialbe4 value4 编辑:
我有一个程序可以像这样将数据打印到控制台(以空格分隔): variable1 value1 variable2 value2 variable3 value3 varialbe4 value4 编辑:
最近我在查看与goliath相关的一些代码时,偶然在Ruby代码中看到了这个词use。 , 中间件等。看起来它不同于include/extend, and require. 有人可以解释为什么存在这个
我是一名优秀的程序员,十分优秀!