标签: html
视频无法在iOS10 Chrome上播放
我似乎无法找到此视频片段的错误.
<video poster="sample.jpg" loop autoplay controls muted playsinline>
<source type="video/webm" src="sample.webm"></source>
<source type="video/mp4" src="sample.mp4"></source>
</video>
视频在Safari中没有任何问题播放(没有针对早期版本的iOS进行测试,但我唯一担心的是自动播放问题？),但在Chrome上我唯一看到的是封面图片和播放按钮触发任何事情.我错过了什么吗？我真的需要使用JS才能让它工作吗？
更新:使用iOS Chrome播放Webm文件似乎存在问题 - 我尝试了来自不同位置的多个文件,似乎需要首先下载才能播放.
推荐指数
解决办法
查看次数
连接圆角正方形
如何创建div徽标,如下图所示:
主要问题是如何将两个盒子连接成如下图所示的形状,有人可以建议吗？
body,html {
width: 100%;
height: 100%;
margin: 0;
}
body {
background-color: #efefef;
}
.wrapper {
height: 40px;
width: 40px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -22.5px;
margin-left: -22.5px;
}
ul {
list-style-type: none;
margin: 0 auto;
padding: 0;
width: 80px;
height: 80px;
position: relative;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
ul li {
width: 2em;
height: 2em;
position: absolute;
/*animation: dance 888ms infinite alternate;
animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);*/ …推荐指数
解决办法
查看次数
自动换行:分解不起作用.draggable元素中的文本溢出问题
请帮忙解决这个问题.目前我有一个div,它是可拖动的,里面的文本是可编辑的.在这里,用户可以使用输入类型范围更改文本大小.
是否可以隐藏文字画布的字母,以便字母超出图像画布div的边界并到达col-sm-8？
这里当用户没有空格地写文本时,那个词就超出了col-sm-8.怎么解决这个？我用overflow:hidden和word-wrap:breakdown,但它不工作.
function submit_button() {
/* ....Image upload function.. */
}
$(".text-canvas").draggable({
containment: ".imageupload",
create: function() {
$("#text-canvas ").css("width ", 'auto');
},
drag: function() {
$("#text-canvas ").css("width ", 'auto');
},
start: function() {
$("#text-canvas ").css("width ", 'auto');
},
stop: function() {
$("#text-canvas ").css("width ", 'auto');
}
});
$("#fontsize").on("change", function() {
var v = $(this).val();
$('.text-canvas').css('font-size', v + 'px');
});.text-canvas {
z-index: 1;
position: absolute;
}
.imageupload {
z-index: -1;
} …推荐指数
解决办法
查看次数
如何在HTML5范围输入中反转方向？
要在HTML5中使用滑块,我们可以使用范围输入.即
<input type="range" min="0" max='5' value="0" step="1" >
默认行为是左侧的最小值和右侧的最大值.有没有办法可以将最大值放在左侧？
我知道我可以用Javascript做到这一点.有没有办法单独使用HTML？
回复"可能重复的问题":
那个问题接受javascript解决方案,我要求的是HTML解决方案.我认为这显然不是重复吗？
推荐指数
解决办法
查看次数
防止在iOS上溢出/橡皮圈滚动
关于SO上的溢出/橡皮带滚动主题已经存在多个问题但是
- 它们都没有为iOS 9.3.2上的所有案例提供解决方案
- 他们都没有提供有关问题本身的广泛而完整的信息
这就是我将这篇文章创建为知识体系的原因.
问题:
在任何其他帖子中从未提及的事情是iOS溢出滚动实际上是两部分行为.
1.溢出滚动内容 overflow: auto/scroll
这是元素的通常已知且最常想要的行为,-webkit-overflow-scrolling: touch其中连续/动量滚动行为经过元素容器以平滑地减慢滚动内容.
当您以足够高的动量滚动元素的内容以使动量滚动超过滚动内容的长度时,就会发生这种情况.
通过此行为,element.scrollTop属性相应地更改为元素滚动位置并且小于0或大于最大scroll(element.scrollHeight - element.offsetHeight).
2.溢出滚动 <body>
如果您尝试滚动任何元素已经在其最小/最大滚动位置甚至更远(顶部向上的元素或底部向下的元素),则会发生此行为.然后滚动似乎"冒泡"到<body>标签,并滚动整个视口.
与上述相反,该element.scrollTop属性不会改变,而是document.body.scrollTop改变.
聚焦锁定和行为之间切换(1.5秒延迟)
在这种情况下最令人恼火的事情是上述两种类型之间的切换不会立即切换.
输入其中一个之后,您无法将焦点切换到任何其他元素(可滚动元素,按钮,链接......),因此滚动行为也不会改变.
例如:如果您向上滚动已经位于其顶部位置的元素,则输入
overflow scrolling type 2并且用户最自然的反应是尝试向下滚动.因为焦点被锁定在身体滚动而不是overflow scrolling type 1它停留在type 2身体上并且整个身体向下滚动.然后,典型的用户开始任意地开始频繁地向上和向下滚动而不会突破type 2.
焦点的切换以及滚动行为的改变只能在溢出动画结束并且元素静止(甚至比[大约0.5s]更长)之后才会发生.
因此回到前面的例子,用户的正确反应是停止触摸屏幕大约1s - 1.5s然后再尝试向下滚动.
推荐指数
解决办法
查看次数
HTML在构造参数时遵循哪些规则？
我正在使用Rails基于一组复杂的嵌套属性自动神奇地创建子对象.因此,我需要以非常特殊的方式嵌套参数.显然我意识到我可以用JS构建它们,但是我希望表单的顺序自动帮助构造.对于上下文,我有2列,由2 <td>秒表示.每列可以创建新记录或编辑现有记录.当然,当要修改现有记录时,必须传递记录的id.
呈现的HTML如下:
<td width="50%" style="padding-right:3%" class="logistic-details" data-type="logistics" data-typelogistics="delivery" data-instructions="test instructions" data-id="1" data-amount="20">
<span class="area-to-inject-amount-inputs" data-object="type_logistics" data-type="logistics" data-typelogistics="delivery">
<input class="labeler-response" name="type_logistics_attributes[][id]" type="hidden" value="1">
<input class="labeler-response" name="type_logistics_attributes[][instructions]" type="text" value="test instructions">
</span>
</td>
<td width="50%" style="padding-right:3%" class="logistic-details" data-type="logistics" data-typelogistics="pickup" data-instructions="" data-id="" data-amount="0">
<span class="area-to-inject-amount-inputs" data-object="type_logistics" data-type="logistics" data-typelogistics="pickup" data-actioned="charged">
<input type="hidden" name="type_logistics_attributes[][type_of_logistics]" value="pickup">
<input class="injected-amount-input" type="number" min="0" max="" placeholder="Amount" name="type_logistics_attributes[][charged_amounts_attributes][][amount]" value="20">
<span class="area-to-inject-type-of-amount">
<input type="hidden" name="type_logistics_attributes[][charged_amounts_attributes][][type_of_amount]" value="logistics">
</span>
<input class="labeler-response" name="type_logistics_attributes[][instructions]" type="text" placeholder="Enter address and instructions">
</span>
</td>
在这种情况下,第一个<td>是修改id为1的现有记录,而第二个<td> …
html ruby-on-rails named-parameters nested-forms nested-attributes
推荐指数
解决办法
查看次数
位置:粘滞按钮在IE 11中不起作用
我需要使包含按钮的div变粘,以便当用户滚动屏幕时,该div中的按钮将保持在底部.
这样,用户无需一直向下滚动以单击按钮.
包含按钮的div一直在这里:
<div class="form-group sticky-button-thing-not-working-on-ie">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
.sticky-button-thing-not-working-on-ie {
position: sticky;
bottom: 0;
right: 0;
background: rgba(0, 211, 211, 0.6);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<div class="container body-content">
<h2>Edit</h2>
<form action="/Movies/Edit/3" method="post">
<input name="__RequestVerificationToken" type="hidden" value="kBoJXRfdKTYn4uw8fXl3V_yNVa_xD1s0vyepuNLJLxC3InZ-jA1R4b9EjFDO3SGMMp6T7E91m_wy9vGzm4Z0WUm1_8vljyrKMz6frJcQBqY1" />
<div class="form-horizontal">
<h4>Movie</h4>
<hr />
<input data-val="true" data-val-number="The field ID must be a number." data-val-required="The ID field is required." id="ID" name="ID" type="hidden" value="3" />
<div class="form-group"> …推荐指数
解决办法
查看次数
Bootstrap卡在示例中没有显示
为什么我的Bootstrap卡看起来很奇怪？在这些例子中,他们看起来像一个带有边框和白色填充卡,但我的模样只有文字没有填充和白色背景.
例如:
我不知道代码是否会对你有所帮助,但这里是:
HTML:
.container {
left: 0;
right: 0;
bottom: -340px;
text-align: middle;
position: absolute;
}CSS:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="card">
<img class="card-img-top" src="http://www.themdfactor.com/wp-content/uploads/2015/09/card1.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">This is Card #1</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="http://v4-alpha.getbootstrap.com/components/card/" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
</div>
</div>html css twitter-bootstrap twitter-bootstrap-3 bootstrap-cards
推荐指数
解决办法
查看次数
你如何使用GitHub的引物和octicons？
我正在尝试使用GitHub的引物和octicons.在使用npm安装后我开始使用GitHub定义的css类,将build.css文件包含在我的html文档中.我如何将项目指向octicons给我的所有svg图标？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Primer</title>
<link rel="stylesheet" href="node_modules/primer-css/build/build.css">
</head>
<body>
<form>
<div class="input-group">
<input class="form-control" type="text" placeholder="Username">
<span class="input-group-button">
<button class="btn">
<span class="octicon octicon-clippy"></span>
</button>
</span>
</div>
</form>
</body>
</html>
推荐指数
解决办法
查看次数
一个锚中有多个下划线颜色
我想在一个锚</a>中有两种不同的下划线颜色.像这样:
<a href="somehref">
<span>This text should underline RED on `a` hover</span>
<span>This text should underline GREY on `a` hover</span>
</a>
我可以text-decoration在悬停时添加到每个跨度,但这会导致每个行单独悬停.我想要它,以便当我将鼠标悬停在</a>两个跨度的任何地方时,下划线并color继承其字体.
这可能吗？
注意:我知道text-decoration-color但由于限制支持,我无法使用它.
推荐指数
解决办法
查看次数
标签 统计
html ×10
css ×7
css3 ×2
css-position ×1
css-shapes ×1
draggable ×1
github ×1
html5 ×1
ios ×1
ios10 ×1
javascript ×1
jquery ×1
nested-forms ×1
overflow ×1
playback ×1
sass ×1
scroll ×1
svg ×1
video ×1