小编Hid*_*bes的帖子
为Chrome中的最后对齐内联块元素添加了额外空间
我遇到了一个似乎只出现在Chrome中的小问题(在IE10和FF 31中经过测试和确定).
在提供的示例中,存在#message和#link,两者都设置为display: inline-block;使得它们可以垂直对齐到彼此的中间(文本的#message长度可以大大变化).
text-align: justify;已设置#container为确保#message左对齐和#link右对齐.
问题是在某些窗口大小的右边会出现一个小的"空格" #link.
问题:
应该是什么样的:
我实际上想要实现的目标:
如果您查看小提琴并且看不到问题,请尝试重新调整窗口大小.
- 导致Chrome出现此问题的原因是什么？
- 有没有办法解决这个问题而不使用浮动(我想保持垂直对齐)？
JS小提琴:
HTML:
<div id="container">
<div id="message">Lorem 1. Ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum gravida tincidunt.</div>
<a id="link" href="#">OK</a>
<div id="info">Lorem 2. Ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum gravida tincidunt.</div>
</div>
CSS:
#container {
background-color: red;
bottom: 0;
left: 0;
margin: 10px …9
推荐指数
推荐指数
1
解决办法
解决办法
1517
查看次数
查看次数
如何使用css3为div设置动画
我有以下代码:
$('.div-1').on('click', function() {
$('.block').addClass('animated');
});
$('.div-2').on('click', function() {
$('.block2').addClass('animated');
});html,
body {
height: 100%;
}
.div-1 {
display: inline-block;
padding: 40px;
background: tomato;
}
.div-2 {
display: inline-block;
padding: 40px;
background: tan;
}
.block2 {
background: green;
}
.animated {
-webkit-animation: animateThis 0.2s ease;
animation: animateThis 0.2s ease;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.block {
background: red;
}
@-webkit-keyframes animateThis {
0% {
height: 0;
width: 0;
}
100% {
height: 100%;
width: 100%;
}
}
keyframes animateThis …9
推荐指数
推荐指数
2
解决办法
解决办法
383
查看次数
查看次数
AddThis插件不能排除移动工具箱中的服务
我按照他们的说明实现了addThis共享框.我想在共享工具框中仅包含以下服务,这些服务在桌面浏览器上工作正常但在移动设备上被忽略,这意味着每个服务都显示在共享框的移动版本上.
其他人遇到过这个问题？可以做些什么来解决它？
<script src="https://s7.addthis.com/js/300/addthis_widget.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="share_btn">Press me to test sharing!!!!</div>
<script>
var addthis_config = {
services_expanded: 'facebook,twitter,email,tumblr,link,sinaweibo,whatsapp'
}
$(".share_btn").on("click", function () {
addthis.update('share', 'url', 'http://google.com');
addthis_sendto('more');
});
</script>8
推荐指数
推荐指数
1
解决办法
解决办法
797
查看次数
查看次数
16:9填充底部技巧在FireFox中无法正常工作
我一直在尝试为内容块实现响应式16:9比率技巧,同时在Chrome中获得预期结果,其他浏览器(如FireFox和Edge)显示完全不同而不是预期.
.streamContainer {
position: absolute;
width: 80%;
height: calc(100% - 120px);
display: flex;
bottom: 0px;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
transition: height 0.5s;
background: blue;
}
.streamRatio {
position: relative;
width: 100%;
padding: 56.25% 0 0 0;
content: '';
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: block;
background: red;
height: 0;
}
.streamInner {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
background: green;
}<div class="streamContainer">
<div class="streamRatio">
<div class="streamInner">
Content Goes Here
</div> …7
推荐指数
推荐指数
2
解决办法
解决办法
3986
查看次数
查看次数
第二次单击时从元素中删除活动和焦点
我正在尝试制作带有信息的交互式地图。当您单击一个点时，它会调整大小并显示一些联系人。这是因为元素获得了:active和:focus伪类。
有没有办法在第二次单击元素时从元素中删除伪类？实际上，是否可以在再次单击时关闭元素？
.distribution-map {
position: relative;
width: 100%;
padding: 20px;
box-sizing: border-box;
margin: 0 auto;
}
.distribution-map .map-point {
cursor: pointer;
outline: none;
top: 20px;
position: absolute;
width: 40px;
height: 40px;
border-radius: 20px;
}
.distribution-map .map-point:active,
.distribution-map .map-point:focus {
margin: 0;
padding: 0;
filter: opacity: 1;
width: 300px;
height: 220px;
color: #e5e5e5;
z-index: 1;
-webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
}<div …7
推荐指数
推荐指数
1
解决办法
解决办法
3419
查看次数
查看次数
当最后一个孩子改变时,Chrome不会更新样式
问题
last-child由于使用JavaScript动态添加额外元素而导致更改时,样式不会更新.
例
点击下面代码段中的"添加更多块".添加新块时,第四个.block元素("测试块4")将不会有一个底部红色边框,即使它不再是最后一个元素#container.
$("#addMore").one("click", function() {
$("#container").append($("#container").html());
$(this).remove();
});.block {
border-bottom: 1px solid red;
counter-increment: block;
margin: 20px 0;
position: relative;
}
.block:after {
content: " " counter(block);
}
.block:last-child {
border-bottom: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="block">Test block</div>
<div class="block">Test block</div>
<div class="block">Test block</div>
<div class="block">Test block</div>
</div>
<div id="addMore">Add more blocks</div>预期的行为
单击"添加更多块"后,除第八个块("测试块8")外,所有.block元素都应具有底部红色边框.
浏览器受影响
测试但无法在Chrome 55.0.2883.87 m中运行.IE 11.0.9600.18538和Firefox 50.1.0返回的预期行为.
可以在没有: …
7
推荐指数
推荐指数
1
解决办法
解决办法
396
查看次数
查看次数
缩放图像以最大限度地适应可用空间并使其居中
我正在构建一个单页面应用程序.在其中一个视图中,我想显示一个必须占用尽可能多的可用空间的图像:
- 最重要的是:它必须保持纵横比
- 它不能被裁剪
- 它必须水平和/或垂直拉伸(不改变纵横比)以覆盖最大可能空间
- 图像和视口的大小未知
- 它必须居中
- 不能使用js
- 元素必须是
img元素,不能使用背景 - 我已经有了背景(在容器中)
例如,假设图像是100px x 100px,我们有一个500px x 300px的容器.然后将图像拉伸至300px x 300px,并水平居中,以便在两侧留下100px作为填充.
这可能吗？
这是我想要完成的未完成的代码.
.container1 {
width: 500px;
height: 300px;
border: 2px;
border-color: red;
border-style: solid;
}
.container2 {
width: 300px;
height: 500px;
border: 2px;
border-color: blue;
border-style: solid
}
.fill-vertical {
border: 2px;
border-style: solid;
border-color: green;
display: block;
max-width: 100%;
}
.fill-horizontal {
width: 100%;
border: 2px;
border-style: solid;
border-color: green;
} <h1>Container 1, 500px x 300px, not …6
推荐指数
推荐指数
2
解决办法
解决办法
1万
查看次数
查看次数
文本溢出：IE 中的省略号
当我text-overflow: ellipsis;在 IE 中使用时，我遇到了两个长词的问题：
在 Chrome 中，它看起来像：
第一个长字1...
第二个长字2...
在 IE 中：
第一个长字1...
secondlongword2 //单词被裁剪，但点不存在
HTML 和 CSS：
.orange {
color: #f58026;
text-overflow: ellipsis;
display: block;
overflow: hidden;
}<span class="orange" title="12 12">first_verylongworddddddddddddddddddddddddddddddddddddddddddd second_verylonglonglonglonglonglonglonglonglonglong</span>如果有人遇到问题，请帮助。或者请告诉我是否存在其他方法来修复它。
5
推荐指数
推荐指数
1
解决办法
解决办法
4671
查看次数
查看次数
span:hover在Firefox中不起作用,但在Chrome中有效
我有一段代码,我在Firefox中不起作用.该.icon按钮时,悬停图像不会改变.它在Chrome中完美运行.
button.add-to-cart-button .button-left .icon {
display: block;
position: absolute;
left: 0;/*RW 6px; */
top: 0;/*RW 6px; */
width: 35px;/*RW 21px; */
height: 31px;/*RW 19px; */
background: url(http://client4.bostonwebco.com/skin/ideal_responsive/images/custom/add_to_cart.gif) 50% 50% no-repeat;
}
button.add-to-cart-button .button-left {
display: block;
text-indent: -5000px;
overflow: hidden;
padding-left: 0px !important;/*RW 2px */
width: 35px !important;/*RW 30px */
position: relative;
font-size: 11px;
text-align: center;
border: 0px;
height: 31px;
margin: 0px;
}
button.add-to-cart-button:hover span.button-left:hover span.icon:hover {
background: url("http://client4.bostonwebco.com/skin/ideal_responsive/images/custom/add_to_cart-over.gif") 50% 50% no-repeat !important;
display: block;
border: none;
} …5
推荐指数
推荐指数
1
解决办法
解决办法
1029
查看次数
查看次数
颜色:继承; 不适用于IE或EDGE中的:: selection
我有一个页面,默认文本选择CSS应用于设置background-color为灰色和color黑色.
现在,对于网页的一部分,我想保留color文本选择.我尝试使用覆盖该部分的选择CSS color: inherit;.它适用于Chrome和Firefox,但不适用于IE和EDGE.
我创建了一个小例子来解释我的问题:
::selection {
color: #000;
background: #c6c6c6;
}
::-moz-selection {
color: #000;
background: #c6c6c6;
}
.p1 {
color: red;
}
.p2 {
color: green;
}
.override ::selection {
color: inherit;
}
.override ::-moz-selection {
color: inherit;
}<div>
<p>Heading 1</p>
<div class="override">
<p class="p1">Sub heading 1</p>
<p class="p2">Sub heading 1</p>
</div>
</div>我想保留colorhtml的部分覆盖类,我无法更改默认选择CSS.
JS小提琴链接:https://jsfiddle.net/h30jczkv/1/
5
推荐指数
推荐指数
1
解决办法
解决办法
1086
查看次数
查看次数