小编Ger*_*ier的帖子
使用FontAwesome时,Flexbox大小调整无法正常工作
我正在面对我的页面布局的flexbox非常奇怪的行为.我正在使用FontAwesome来呈现某些符号.
基本上,我在另一个flexbox项目中有2个flexbox项目,这些子项目比父项目更宽.
1)我有一个.content__header对象,它在另一系列flexbox对象中呈现为flexbox对象.
2)该.content__header对象包含2个子对象:.breadcrumb和.page_tools.这些子对象也呈现为flex项.
3)在.breadcrumb对象内部,我有一些span对象(.breadcrumb__test),其内容被FontAwesome图标替换.使用::after伪元素的绝对定位来完成替换.
4)当我删除所有.breadcrumb__textHTML元素或.breadcrumb__text::after从样式表中删除定义时 - 定义了FontAwesome字体的使用 - 子对象(.breadcrumb和.page_tools)以正确的宽度呈现.所以我猜它与FontAwesome图标的替换有关.
.breadcrumb__text::after {
font-family: "FontAwesome";
font-weight: 400;
}
问题的视觉表示
绿线表示父宽度与实际内容之间的差异.
Code&Fiddle如下.
浏览器:谷歌浏览器47.0.2526.106米
小提琴:
https://jsfiddle.net/44gymmw2/6/
更新
当我text-indent: 100%;从.breadcrumb__textCSS定义中删除时,.breadcrumb按预期呈现.但是,当我离开text-indent原位并删除.breadcrumb__text::after样式表顶部的定义(如上所述)时,它也会正确呈现.
这个问题可能与FontAwesome或text-indentflexbox有关吗？
码
HTML
<body>
<div class="layout_wrapper">
<div class="layout_container__content">
<div class="content">
<header class="content__header"> …推荐指数
解决办法
查看次数
Javascript不会设置XHR响应中收到的httpcookie
我有一个基本的SPA（反应）<-> API（网络核心2.2）设置，带有2个环境：dev和prod（小型项目）。API侧面有一个身份验证机制，用于检查httponly每个包含JWT的请求中cookie 的存在。
在开发环境中，它可以正常运行okey-dokey：，allowCredentials()并且已withCredentials = true在API和react应用程序中进行了设置。两者都在我的本地主机的不同端口上运行。
但是在生产环境中（单独的Heroku dynos），它不会设置httponlycookie：我可以使用我的凭据登录，响应标题包含带有jwt的cookie，但是我要发出的其他每个请求都将不包含cookie。 cookie标头在请求标头中！
然后我得到一个401 Unauthorized ...错误（这是逻辑上的）。我花了数小时尝试所有事情，这让我发疯。
我的简单身份验证XHR（原始）调用：
var request = new XMLHttpRequest()
request.open('POST', apiAuthenticateUser, true)
request.setRequestHeader('Content-type', 'application/json')
request.withCredentials = true
request.send(postData)
我Startup.cs在.net核心api中的配置：
var request = new XMLHttpRequest()
request.open('POST', apiAuthenticateUser, true)
request.setRequestHeader('Content-type', 'application/json')
request.withCredentials = true
request.send(postData)
那就是我如何在api控制器动作响应中设置包含jwt的httponly cookie：
public void Configure(IApplicationBuilder app, IHostingEnvironment env) {
if (env.IsDevelopment()) {
app.UseDeveloperExceptionPage();
IdentityModelEventSource.ShowPII = true;
} else {
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseCors(
options …javascript request-headers response-headers cookie-httponly asp.net-core
推荐指数
解决办法
查看次数
呈现为flexbox的有序列表不显示项目符号/小数(项目也呈现为flexbox)
我有一个有序列表(ol),其display属性设置为flex.列表项也呈现为flexboxes.这样做会导致子弹(数字)不再显示.
有没有办法让我可以在ol课堂上展示子弹.questions.questions--likert(在40px所在的区域padding)？
见小提琴(包含SCSS):http://jsfiddle.net/3y5t0xpx/3/
HTML和编译的CSS如下:
HTML
<form class="form form--test" name="frm-identification" action="/" method="post">
<fieldset>
<h2>Identificatie</h2>
<p>Gelieve volgende gegevens in te vullen vooraleer de test te starten.</p>
<ol class="questions questions--likert">
<li class="question">
<p class="description">Inventieve ideeen brengen</p>
<ul>
<li><label class="input-container input-container--radio"><input type="radio" name="rbt-t1q1" id="rbt-t1q1-1" value="1" /><span class="value">1</span></label></li>
<li><label class="input-container input-container--radio"><input type="radio" name="rbt-t1q1" id="rbt-t1q1-2" value="2" /><span class="value">2</span></label></li>
<li><label class="input-container input-container--radio"><input type="radio" name="rbt-t1q1" id="rbt-t1q1-3" value="3" /><span class="value">3</span></label></li>
<li><label class="input-container …推荐指数
解决办法
查看次数
带溢出的元素上的CSS角切出:隐藏
我正在尝试剪切span设置了顶部边框的元素的左上角.
一切都很好,除了边框一直在白色CSS三角形上运行.这可以通过overflow: hidden;从.contract跨度中删除来修复.但是,我使用溢出来隐藏span元素中的文本,因此删除它是没有选择的.
有没有人知道如何在不改变HTML的情况下实现这一目标？
示例: http ://jsfiddle.net/yt887kaj/
截图:
这是预期的外观.
这是我现在拥有的CSS的结果,注意在切出的三角形上运行的顶部边框.
推荐指数
解决办法
查看次数
响应式 html5：百分比与媒体查询
我正在开发一个简单的 html 5 游戏，类似于http://www.ebaumsworld.com/games/play/80617036/。
我需要使游戏具有响应性，我想问是否应该使用CSS 媒体查询，或者是否应该使用元素宽度和高度的百分比尺寸进行基于百分比的布局。
哪条路最好走？
推荐指数
解决办法
查看次数